Блог

Я использую диаграмму Js в angular. Мне нужно несколько событий, чтобы показать выделенный сегмент. При нажатии или перемещении любого сегмента он работает нормально. Теперь я хочу выделить легенду, когда я нажимаю на любую, но она не работает. Это не событие, происходящее внутри события щелчка. Может кто-нибудь подсказать, что я делаю неправильно.

.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

Вы можете проверить ng2-charts, который является угловым портом Chart.js . Вы всегда можете попытаться получить угловой порт библиотек, так как с ним будет легче работать, и вы не будете удивлены тем, что что-то не работает (например, отсутствие обнаружения изменений в обратных вызовах).

 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