Angular Chart Js图例点击事件不起作用答案

【问题标题】：Angular Chart Js legends click event not workingAngular Chart Js图例点击事件不起作用
【发布时间】：2020-10-07 16:59:37
【问题描述】：

我在角度使用 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>

演示链接

https://stackblitz.com/edit/chartjs-doughnut-chart-u1yj6h?file=src/app/app.component.html

【问题讨论】：

标签： javascript angular chart.js

【解决方案1】：

您可以查看 ng2-charts，它是 Chart.js 的 Angular 端口。您总是可以尝试获取库的 Angular 端口，因为它会更容易使用，并且不会因无法正常工作而感到惊讶（例如未检测到回调中的更改）。

import { Component, OnInit } from "@angular/core";
import { ChartType } from "chart.js";
import { MultiDataSet, Label, Colors } from "ng2-charts";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  // Doughnut
  public doughnutChartLabels: Label[] = ["red", "pink"];
  public doughnutChartData: MultiDataSet = [[55, 45]];
  public colors = [
    {backgroundColor:['rgba(255, 0, 0, 1)','rgba(255, 0, 0, 0.1)']}
  ];
  public doughnutChartType: ChartType = "doughnut";
  options = {
    legend: {
      display: true,
      labels: {
        usePointStyle: true
      },
      onClick: (event, legendItem) => {
        console.log("This is working!");
      }
    },
    tooltips: {
      enabled: false
    },
    onClick: (evt, item) => {
      console.log('Clicked!')
    }
  };

  constructor() {}

  ngOnInit() {}
}

你的模板是：

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

您可以在这里查看 StackBlitz：https://stackblitz.com/edit/ng2-charts-doughnut-template-yjugml2

【讨论】：