как создать функцию, которая запускается при нажатии на круговую диаграмму?
я бы передал выбранный элемент функции
<kendo-chart-series>
<kendo-chart-series-item
type = "pie" [data] = "dataSourcePieChart"
categoryField = "cost" field = "cost">
<kendo-chart-series-item-labels
position = "outsideEnd"
color = "#000"
[content] = "labelContent">
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
🤔 А знаете ли вы, что...
Angular обеспечивает высокую производительность благодаря использованию виртуального DOM.
Привяжите событие seriesClick
к kendo-chart
.
@Component({
selector: 'my-app',
template: `
<kendo-chart (seriesClick) = "seriesClick($event)">
<kendo-chart-series>
<kendo-chart-series-item
type = "donut" [data] = "data"
categoryField = "kind" field = "share">
<kendo-chart-series-item-labels
[content] = "labelContent"
color = "#fff" background = "none">
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-legend [visible] = "false"></kendo-chart-legend>
</kendo-chart>
`
})
export class AppComponent {
public data: any[] = [{
kind: 'Hydroelectric', share: 0.175
}, {
kind: 'Nuclear', share: 0.238
}, {
kind: 'Coal', share: 0.118
}, {
kind: 'Solar', share: 0.052
}, {
kind: 'Wind', share: 0.225
}, {
kind: 'Other', share: 0.192
}];
public labelContent(e: any): string {
return e.category;
}
public seriesClick(e: any): void {
console.info(e.category)
}
}
Пример: серияClick