在 ng2-charts 中使用 JSON 数据

Question

[请告诉我如何改进这个问题，以便您更好地理解，如果我描述的情况和我想要的内容不清楚]

我正在更改我们之前构建的 angular 应用程序中的图表。我们正在使用 ng2-charts。之前我们使用了两个 JSONs/Arrays。但是 REST 服务（我无法更改，因为它来自第三方服务）现在已更改。新的 REST 服务如下所示。我试过一个 JSON。当我的输入是 .ts 文件本身的硬编码 json 时，我能够看到图表。

但是当我试图从 REST(GET) 调用中获取 JSON 时，我很挣扎。

仅供参考：当我在控制台中打印时，我可以看到 JSON。请看图

我遇到错误：

Cannot read property 'data' of undefined

下面是两个 stackblitz 示例。第一个是硬编码 JSON 第二个是来自 REST 调用：

https://stackblitz.com/edit/ng2-charts-line-template-iq1mia

https://stackblitz.com/edit/ng2-charts-line-template-voazjk

public summaryboardJson: Summaryboard[];
  public lineChartLegend = true;
  public lineChartType = 'line';
  public lineChartPlugins = [];
  public lineChartOptions: (ChartOptions & { annotation: any }) = {
    responsive: true,
  };
  public lineChartColors: Color[] = [
    {
      borderColor: 'black',
      backgroundColor: 'rgba(255,0,0,0.3)',
    },
  ];
  public lineChartData: ChartDataSets[];
  public lineChartLabels: Label[];

 ngOnInit() {
        this.http
            .get("https://api.jsonbin.io/b/5c90f7d86892a7259f084846")
            .toPromise()
            .then(response => {
                const data = response.json();
                this.summaryboardJson = data;
                console.log(this.summaryboardJson);

              //START: put data in Bar Chart
              this.lineChartData = [
                { data: this.summaryboardJson.map(a => a.noOfDefects), label: 'Defects' },
              ];
              this.lineChartLabels = this.summaryboardJson.map(a => a.Month);
              //END: put data in Bar Chart

            })
            .catch(error => {
                console.log(error);
                return Observable.of<Summaryboard[]>([]);
            });

关于此的任何帮助，如何使用来自 REST 调用的 JSON 来创建相同的图表？

Answer 1

试试这个：

https://stackblitz.com/edit/ng2-charts-line-template-umuhe1?file=src%2Fapp%2Fapp.component.ts

我已经更新了你的第二个 stackblitz

我将 lineChartLabels 数组初始化为一个新数组，并对长度进行了 ngIf。

在 ng2-charts 中使用 JSON 数据

use of JSON data in ng2-charts

typescript

ng2-charts

angular