Chart.js 角度7中的折线图不工作-数据类型正确吗?

Chart.js 角度7中的折线图不工作-数据类型正确吗?,chart.js,angular7,ng2-charts,Chart.js,Angular7,Ng2 Charts,我有一个从中获取数据的API url='' 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-wh

我有一个从中获取数据的API

url=''

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>    
我还有一个界面,如下所示:
数据。ts:

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
            }]
        }
    }
});
export interface Data {
    year: number;
    price: number;
}  
当我运行该代码时,会得到如图所示的空图表

我怎样才能修好它

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

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: {}
});

这样一切都很好。

我将代码修改为:

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
            }]
          }
        }
      });
    });

你的
console.log(y.year,y.price)为您提供所需的数据?当我尝试它时,我在
数组中得到
未定义的
。from().forEach()
。谢谢。。。这给了我一个想法。请核对我的答案。