如何创建一个从饼图的点击事件开始的函数
how to create a function that starts at the click event of the pie chart
如何创建饼图点击事件开始的函数?
我会将所选项目传递给函数
<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>
将 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.log(e.category)
}
}
示例:seriesClick
如何创建饼图点击事件开始的函数?
我会将所选项目传递给函数
<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>
将 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.log(e.category)
}
}
示例:seriesClick