我正在尝试在正在开发的Angular应用程序中使用Chartjs。
因此,在更改选择菜单的值时,应该根据所选值绘制图表。但是我收到 TypeError:item为null 。我到处都是,发现的解决方案不起作用。
这是选择部件的代码:
<mat-form-field>
<mat-select [(ngModel)]="selected" placeholder="Y"
(ngModelChange)="drawBubbleChart($event)">
....
</mat-select>
</mat-form-field>
这是我的 html 代码:
<div *ngIf="chart">
<canvas #ctrx >{{ chart }}</canvas>
</div>
我的 ts 代码:
@ViewChild('ctrx') private chartRef;
drawBubbleChart(){
let ds = this.prepareData();
let chartID = this.chartRef.nativeElement.getContext("ctrx");
let options = {
title: {
display: true,
text: "Testing what's up"
}, scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "One"
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: "Two"
}
}]
}
}
console.log("data =>", ds);
if (ds.length !== 0) {
console.log("inside if !== 0");
this.chart = new Chart(chartID,{
type: 'bubble',
datasets: ds,
options: options
});
}
}
我尝试了let chartID = document.getElementById("ctrx");
,但它给了我一个 TypeError:项目也为空。
选择一个选项后,如何解决此问题并绘制图表?
答案 0 :(得分:0)
确保不要使用*ngIf
,它会破坏画布和ElementRef。用CSS隐藏它。
我也使用getContext('2d')
<canvas #canvas>{{ chart }}</canvas>
@ViewChild('canvas') canvas: ElementRef;
this.canvas.nativeElement.getContext('2d')