Javascript 角度图表Js图例单击事件不工作

我在angular中使用Chart Js。我需要一些事件来显示突出显示的部分。单击或鼠标移动任何段都可以正常工作。现在我想突出显示一个图例，当我点击任何一个，但它不工作。它不是一个进入点击事件内部的事件。有人能指出我做错了什么吗

.cmp

export class AppComponent implements OnInit  {
  chart: any;

  colorOptions = ['red', 'pink']

ngOnInit() {

    this.chart = new Chart('canvas', {
          type: 'doughnut',
          data: {
            labels: ['red','pink'],
            datasets: [
              { 
                data: [55,45],
                backgroundColor: ['rgba(255, 0, 0, 1)','rgba(255, 0, 0, 0.1)'],
                fill: false,
              },
            ]
          },
          options: {
            legend: {
              display: true,
              labels:{
                usePointStyle:true,
              },
              onClick: (event, legendItem) => {
                console.log("This is not working")
                  // i want to highlight clicked legend here
              }
            },
            tooltips:{
              enabled:false
            },
            // events: ['click','mousemove'],
            onClick: (evt, item) => {
              if(item[0]) {
                this.chart.update()
                item[0]._model.outerRadius += 10
              } else {
                this.chart.update()
              }
            },
            onHover: (evt, item) => {
              if(item[0]) {
                this.chart.update()
                item[0]._model.outerRadius += 10
              } else {
                this.chart.update()
              }
            }
          }
        });
  }
 
}

html

<div [hidden]="!chart">
  <canvas id="canvas"></canvas>
</div>

演示链接

您可以检查Chart.js的角度端口。您总是可以尝试获得库的角度端口，因为它更易于使用，并且不会因为无法工作而感到惊讶（例如无法检测回调中的更改）

您的模板是：

<div style="display: block;">
  <canvas baseChart 
    [data]="doughnutChartData"
    [labels]="doughnutChartLabels"
    [chartType]="doughnutChartType"
    [colors]="colors"
    [options]="options"
    >
  </canvas>
</div>

您可以在此处查看StackBlitz：

<div style="display: block;">
  <canvas baseChart 
    [data]="doughnutChartData"
    [labels]="doughnutChartLabels"
    [chartType]="doughnutChartType"
    [colors]="colors"
    [options]="options"
    >
  </canvas>
</div>