Angular 7 中的折线图不起作用 - 数据类型是否正确？

Question

我有一个 API 从那里获取数据。

url = 'https://api.myjson.com/bins/1dnpid';

HTML代码：

<div *ngIf="chart" class="col-xl-4 col-lg-6">
  <div class="card cardColor mb-3">
    <div class="card-header headColor">
      <img class="img-fluid" src="../../../assets/images/chart-bars-box-16-white.png" /> &nbsp;
      <b>Issue Chart</b>
    </div>
    <div class="card-body">
      <canvas id="canvas">{{ chart }}</canvas>
    </div>
  </div>
</div>

Angular代码（XHR请求）：

this.httpClient.get(this.url).subscribe((res: Data[]) => { 
Array.from(res).forEach(function (y: Data) {
    this.year.push.parseInt(y.year);
    this.price.push.parseInt(y.price);
    console.log(y.year, y.price);
});
this.chart = new Chart('canvas', {
    type: 'line',
    data: {
        labels: this.year,
        datasets: [{
            data: this.price,
            borderColor: '#0076CE',
            fill: false
        }]
    },
    options: {
        legend: {
            display: true
        },
        scales: {
            xAxes: [{
                display: true
            }],
            yAxes: [{
                display: true
            }]
        }
    }
});

我还有一个界面，如下所示：
Data.ts:

export interface Data {
    year: number;
    price: number;
}

当我运行该代码时，我得到如图所示的空图表
我该如何解决？

Answer 1

我总是使用一个数组作为我的标签，一个数组用于我的数据。可读性和调试性更好。

let yearArray = []
let priceArray = []

for(let key in results){
  yearArray.push(results[key].year)
  priceArray.push(results[key].price)
}

this.chart = new Chart(document.getElementById('chart'), {
    type: 'line',
    data: {
        labels: yearArray,
        datasets: [{
            data: priceArray,
            borderColor: '#0076CE',
            fill: false
        }]
    },
    options: {}
});

这样一切正常。

Answer 2

我将代码修改为：

this.httpClient.get(this.url).subscribe((res: any) => {
      console.log("Array result is ==>", res); // Data is coming

      let yearArray = [];
      let priceArray = [];

      let year = this.year;
      let price = this.price;
      res.results.map((data: any, key) => {

        this.year.push(data.year);
        this.price.push(data.price);
        console.log("Year data is ==>", this.year, "Price data is ==>", this.price); // here 
      })
      this.chart = new Chart('canvas', {
        type: 'line',
        data: {
          labels: this.year,
          datasets: [
            {
              data: this.price,
              borderColor: '#0076CE',
              fill: false
            }
          ]
        },
        options: {
          legend: {
            display: true
          },
          scales: {
            xAxes: [{
              display: true
            }],
            yAxes: [{
              display: true
            }]
          }
        }
      });
    });

Angular 7 中的折线图不起作用 - 数据类型是否正确？

Line graph in Angular 7 not working - is data type proper?

chart.js

ng2-charts

angular7