带有Chart.js TypeError的Angular 6:item为null

时间:2019-02-25 14:43:00

标签: angular-material chart.js

我正在尝试在正在开发的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:项目也为空

选择一个选项后,如何解决此问题并绘制图表?

1 个答案:

答案 0 :(得分:0)

确保不要使用*ngIf,它会破坏画布和ElementRef。用CSS隐藏它。

我也使用getContext('2d')

<canvas #canvas>{{ chart }}</canvas>
@ViewChild('canvas') canvas: ElementRef;
this.canvas.nativeElement.getContext('2d')