数据绑定中的问题-剑道图

Question

我想显示一个图表(饼/甜甜圈(，显示个人的年度出勤数据，我使用剑道图表来实现这一点。我想在系列中显示传奇岁月和PresentDays/AbsentDays/NA。这是示例JSON数据源：[{"Year":"2018-2019","PresentDays":90,"AbsentDays":3,"NA":7},{"Year":"2019-2020","PresentDays": 85,"AbsentDays":10,"NA":5}]

注：年份是动态的，可能因个人和年份而异。

附言：到目前为止，我所尝试的让我在传奇中获得了系列领域。但我想自定义图例以显示年份。任何建议都值得赞赏。谢谢

Answer 1

您可以重塑数据以用于圆环图

import { Component } from '@angular/core';
import { LegendLabelsContentArgs } from '@progress/kendo-angular-charts';
import { IntlService } from '@progress/kendo-angular-intl';
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-title text="Attendance"></kendo-chart-title>
<kendo-chart-legend [visible]="false"></kendo-chart-legend>
<kendo-chart-area background="none"></kendo-chart-area>
<kendo-chart-tooltip>
<ng-template kendoChartSeriesTooltipTemplate
let-value="value" 
let-category="category" 
let-series="series"
>
{{ category }} ({{ series.name }}): {{ value }}%
</ng-template>
</kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item 
*ngFor="let series of pie_model; let outermost = last;"
type="donut" 
[startAngle]="150"
[name]="series.name" 
[data]="series.data"
field="value"
categoryField="category">
<kendo-chart-series-item-labels 
*ngIf="outermost"
position="outsideEnd" background="none"
[content]="labelContent">
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public attendance: any[] = [
{"Year":"2018-2019","PresentDays":90,"AbsentDays":3,"NA":7},
{"Year":"2019-2020","PresentDays":85,"AbsentDays":10,"NA":5}
];
public pie_model: any [] = [];
constructor(private intl: IntlService) {
for (var index=0; index<this.attendance.length; index++) {
var item = this.attendance[index];
var model_item = { 
name: item.Year, 
data: [
{ category: "PresentDays", value: item.PresentDays },
{ category: "AbsentDays", value: item.AbsentDays },
{ category: "NA", value: item.NA }
]
};
this.pie_model.push(model_item);
}
console.log(this.pie_model);
this.labelContent = this.labelContent.bind(this);
}
public labelContent(args: LegendLabelsContentArgs): string {
return `${args.dataItem.category}
(${this.intl.formatNumber(args.dataItem.value, 'n')})`;
}
}