使用 json 数据在 angular 中创建动态图表

Question

我是初学者，我尝试使用 angular 和 Kendo UI 创建动态饼图。我想从 json 文件中获取数据，它位于资产文件夹中。我尝试 link .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;
  }
}

Answer 1

尝试将您传递到 <kendo-chart-series-item> 标记的数据修改为 [data]="data?.data"，因为 [data] 应该是对象数组的形式，而您的数组对象是 json 文件中键 data 的值。

使用 json 数据在 angular 中创建动态图表

Creating a dynamic chart in angular using json data

json

angular

charts

httpclient

http-get