使用 json 数据和 KendoUI 的 Angular 个图表

Question

我是初学者，我尝试使用 json 数据创建饼图。但是这段代码没有显示任何错误，也没有显示图表。

component.ts 文件 在这里

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
  export class pieData {
  constructor(
    public kind: string,
    public share: number,
  ) {}
}

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css']
})
export class PieChartComponent implements OnInit {

  pieData: pieData[];
  constructor(private httpClient: HttpClient) {}
      ngOnInit() {
    this.getpieData();
  }
      getpieData() {
    this.httpClient.get<any>('http://localhost:3000/pieData').subscribe(
      Response => {
        console.log(Response);
        this.pieData = Response;
      }
    );

    console.log(this.pieData);
  }
}

component.html 文件 在这里

    <kendo-chart [transitions]="false" [style.height]="'100%'" [style.width]="'100%'">
  <kendo-chart-tooltip format='{0}%'></kendo-chart-tooltip>
  <kendo-chart-series>
    <kendo-chart-series-item type="pie"
                             categoryField="kind"
                             field="share"
                             [autoFit]="true"
                             *ngIf="pieData">
      <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 文件在这里（在 assets 文件夹内）

 "pieData": [
    {
      "id": 1,
      "kind": "Solar",
      "share": 5
    },
    {
      "id": 2,
      "kind": "Wind",
      "share": 2
    },
   ]

Answer 1

首先，您应该修改 getData() 方法以从 json 文件中获取数据

getpieData() {
    this.httpClient.get('assets/db.json').subscribe(
      Response => {
        this.pieData = Response;
      }
    );

然后您可以使用 [data] 属性

将此数据传递到您的图表

<kendo-chart [transitions]="false" [style.height]="'100%'" [style.width]="'100%'">
  <kendo-chart-tooltip format='{0}%'></kendo-chart-tooltip>
  <kendo-chart-series>
    <kendo-chart-series-item type="pie"
                             [data]="pieData?.pieData"
                             categoryField="kind"
                             field="share"
                             [autoFit]="true"
                             *ngIf="pieData">
      <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>

这是一个工作示例：
Stackblitz

使用 json 数据和 KendoUI 的 Angular 个图表

Angular charts using json data and KendoUI

json

angular

charts

kendo-ui

httpclient