向下钻取 Angular 个图表

Question

我想为 angular 中的 Kendo 饼图创建向下钻取选项。使用单一数据源。在这里我提供了下面代码的 link 。我想在饼图中显示以下数据

{kind: 'Asia', share: 0.175,parentID: '' },
{kind: 'America', share: 0.238,parentID: '' },
{kind: 'Europe', share: 0.118,parentID: '' },
{kind: 'Africa', share: 0.052,parentID: '' },

当我单击切片时，我想根据父 ID 向下钻取图表。

{kind: 'SL',share: 0.225,parentID: 'Asia' },
{kind: 'India',share: 0.192,parentID: 'Asia' },
{kind: 'Russia',share: 0.192,parentID: 'Europe' },
{kind: 'France',share: 0.192,parentID: 'Europe' },

代码： https://stackblitz.com/edit/angular-myxeux-ugcarp?file=app%2Fapp.component.ts

Answer 1

根据您的代码和我从您的需求中了解到的情况，您需要根据 parentID 过滤您想要向下钻取的切片上的每次点击数据。所以我在这里对您的代码进行了一些更改：

 public initialData: any[] = this.data.filter(
    (element) => element.parentID == ''
  );
  public filtredData: any[] = this.initialData;

  public onClick(e) {
    this.initialData.length != this.filtredData.length
      ? (this.filtredData = this.initialData)
      : this.data.filter((element) => element.parentID == e.dataItem.kind)
          .length == 0
      ? (this.filtredData = this.initialData)
      : (this.filtredData = this.data.filter(
          (element) => element.parentID == e.dataItem.kind
        ));
  }

确保将您的 kindo 组件的数据源更改为 filtredData

<kendo-chart-series-item
            type="donut" [data]="filtredData"
            categoryField="kind" field="share">

向下钻取 Angular 个图表

Drill down Angular chart

charts

drilldown

kendo-ui

typescript

angular