Angular ChartJS缩放最小值，并且回调不起作用

Question

我正在尝试在Angular 9应用程序中使用ChartJS折线图。我想缩放图表的Y轴以显示0（而不是最小值）的值，并在值后添加'％'标记。我的代码如下所示。知道有什么问题吗？

this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'line',
      data: {
        labels,
        datasets: [
          {
            data: dataPoints, 
            borderColor: '#00AEFF',
            fill: false
          }
        ]
      },
      options: {
        responsive: true,
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{
            display: true,
            ticks: {
              beginAtZero: true,
              suggestedMin: 0,
              min: 0,
              callback(value, index, values) {
                 return value + '%';
              }
            },
            afterBuildTicks(chart) {

            }
          }],
        }
      }
    });

Answer 1

您的代码中有许多错误需要纠正才能起作用。

在Angular 8中，@ViewChild需要第二个参数

@ViewChild('lineChart', {static: true}) private chartRef; 

图表应在ngOnInit内部创建，在构造Component时尚无法使用画布。这基本上是Error: Cannot read property 'nativeElement' of undefined的来源。

图表scales.yAxes.ticks.callback内的[options未正确定义为函数。

也需要将canvas括在div中。

请查看修改后的StackBlitz