kendo-ui для угловой настройки LegendItemComponent - PullRequest
Новая
       7

kendo-ui для угловой настройки LegendItemComponent

0 голосов
/ 03 июля 2018

Доброе утро всем. Мне нужно настроить свой элемент легенды в кольцевой диаграмме. Как я читал в документации, мне нужно определить объект LegendItemVisualArgs и инициализировать метод createVisual ().

Здесь я показываю, как я это сделал: 

export class CustomLegendItemViewModel implements LegendItemVisualArgs {
options: any;
pointIndex: any;
sender: ChartComponent;
series: any;

createVisual(): Circle {
    const geometry = new GeomCircle([10, 10], 10);

    return new Circle(geometry);
}

После этого я создаю этот объект в своем угловом компоненте: 

export class ChartItemComponent implements OnInit, OnDestroy {
  visual: CustomLegendItemViewModel = new CustomLegendItemViewModel();
}

И в HTML-коде я пытаюсь привязать свой пользовательский вид легенды к моему объекту: 

<kendo-chart>
            <kendo-chart-series>
                <kendo-chart-series-item [holeSize]="100"
                        type="donut" [data]="data2" [size]="20"
                        categoryField="kind" field="share">
                </kendo-chart-series-item>
            </kendo-chart-series>
            <kendo-chart-legend [visible]="true">
                <kendo-chart-legend-item [visual]="visual"></kendo-chart-legend-item>
            </kendo-chart-legend>
        </kendo-chart>

И я столкнулся с ошибкой, что 

Uncaught TypeError: customVisual is not a function
at LegendItem.renderVisual (legend-item.js:112)
at LegendLayout.render (legend-layout.js:33)
at Legend.createItems (legend.js:101)
at new Legend (legend.js:27)
at Chart._getModel (chart.js:463)
at Chart._redraw (chart.js:279)
at Chart._noTransitionsRedraw (chart.js:1284)
at Chart._resize (chart.js:134)
at Chart.resize (chart.js:128)
at ChartComponent.push../node_modules/@progress/kendo-angular-charts/dist/es/chart.component.js.ChartComponent.resize (chart.component.js:389)

У кого-нибудь есть идеи, как мне это решить? Или просто отправьте ссылку на пример настройки.

Спасибо!

1 Ответ

0 голосов
/ 03 июля 2018

На основе API вам необходимо предоставить function для ввода visual. ( Справочник по API )

В приведенном ниже коде я связываю функцию visualFn со входом visual. ( Рабочий пример )

HTML 

<kendo-chart>
    ...
    <kendo-chart-legend [visible]="true">
        <kendo-chart-legend-item [visual]="visualFn"></kendo-chart-legend-item>
    </kendo-chart-legend>
</kendo-chart>

компонент 

public visualFn(e: SeriesVisualArgs): Group {
    const geometry = new GeomCircle([10, 10], 10);
    return new Circle(geometry);
}
...