Chart.js 角度7中的折线图不工作-数据类型正确吗?
我有一个从中获取数据的API url='' HTML代码: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
<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" />
<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()
。谢谢。。。这给了我一个想法。请核对我的答案。