NG2图表中JSON数据的使用

Question

请让我知道如何改进这个问题，以便你更好地理解，如果我不清楚地描述情况和我想要什么。

我正在改变我的角度应用程序的图表，这是我们早些时候建立的。我们正在使用NG2图表。前面我们使用了两个JSON/数组。但是REST服务(我不能更改，因为它来自第三方服务)现在已经改变了。新的REST服务如下所示。我试过一个JSON。当我的输入是.ts文件本身中的硬编码json时，我能够看到图形。

但是，当我试图从REST( get )调用中获得JSON时，我正在挣扎。

FYI:当我在控制台中打印JSON时，我可以看到它。请看这张照片

我正在犯错误：

无法读取未定义的属性“数据”

下面是两个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

我更新了你的第二次闪电战

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