使用 json 数据以角度创建动态图表答案

【问题标题】：Creating a dynamic chart in angular using json data使用 json 数据以角度创建动态图表
【发布时间】：2022-02-01 09:34:39
【问题描述】：

我是一名初学者，我尝试使用 Angular 和 Kendo UI 创建动态饼图。我想从 json 文件中获取数据，它位于 assets 文件夹中。我试图链接 .ts 文件和 json 文件。但图表没有显示。

这是我的 component.html 文件

<kendo-chart [transitions]="false"  [style.height]="'100%'" [style.width]="'100%'">
  <kendo-chart-series>
    <kendo-chart-series-item type="pie"
                             [data]="data"
                             categoryField="kind"
                             field="share"
                             [autoFit]="true"
                             *ngIf="data">
      <kendo-chart-series-item-labels [align]="labelAlign"
                                      color="#000"
                                      [content]="labelContent">
      </kendo-chart-series-item-labels>
    </kendo-chart-series-item>
  </kendo-chart-series>
  <kendo-chart-legend [visible]="false"></kendo-chart-legend>
</kendo-chart>

这是我的 db.json 文件

{"data": [
    {
      "id": 1,
      "kind": "Solar",
      "share": 5
    },
    {
      "id": 2,
      "kind": "Wind",
      "share": 2
    },
    {
      "id": 3,
      "kind": "Geothermal",
      "share": 1
    },
    {
      "id": 4,
      "kind": "Natural Gas",
      "share": 1
    },
    {
      "id": 5,
      "kind": "Coal",
      "share": 80
    },
    {
      "id": 6,
      "kind": "Hydroelectric",
      "share": 2
    },
    {
      "id": 7,
      "kind": "Nuclear",
      "share": 2
    },
    {
      "id": 8,
      "kind": "Other",
      "share": 1
    }
  ]
}

这是我的 component.ts 文件

  data = null;
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('assets/db.json').subscribe(
      data => this.data = data,
      err => console.error('File is missing: ', err),
    );
  }

  public labelContent(e: any): string {
    return e.category;
  }
}

【问题讨论】：

控制台有错误吗？
不，它没有显示任何错误

标签： json angular charts httpclient http-get

【解决方案1】：

尝试将你传入<kendo-chart-series-item>标签的数据修改成[data]="data?.data"那样，因为[data]应该是对象数组的形式，而你的对象数组就是键@的值987654324@ 在您的 json 文件中。

【讨论】：