数据绑定问题 - 剑道图

Question

我想显示一个图表（饼图/甜甜圈），显示个人的年度出勤数据，我正在为此使用剑道图表。我想在系列中显示 Legends 和 PresentDays/AbsentDays/NA 中的年份。这是示例 JSON 数据源：[{"Year":"2018-2019","PresentDays":90,"AbsentDays":3,"NA":7},{"Year":"2019-2020","PresentDays": 85,"AbsentDays":10,"NA":5}]

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

PS：到目前为止，我所尝试的方法为我提供了 Legends 中的 Series 字段。但我想自定义图例以显示年份。任何一种建议都是值得赞赏的。谢谢。

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')})`;
    }
}