Блог

Я создаю диаграмму, в которой мне нужно щелкнуть по каждой метке данных (я указываю на это на изображении ниже), чтобы затем отобразить конкретные диаграммы данных, на которые был сделан щелчок.

График

Моя проблема в том, что я не могу щелкнуть и определить, какую метку данных я нажимаю, я знаю, что использую метод getElementsAtEvent из ChartJS, но, используя связанные данные в Angular, я не могу получить доступ к этому методу (я не создаю объект диаграммы). Я делюсь своим кодом ниже:

Мой шаблон:

 <div style="display: block">
<canvas id ="radarChart" baseChart [datasets]="radarChartData" [labels]="radarChartLabels"
    [chartType]="radarChartType" [options]="radarChartOptions"></canvas>
 

Мой компонент:

 export class GraficoRadarComponent implements OnInit {

  public radarChartLabels = [];
  public radarChartData = [{
    label: '',
    data: [],
    hidden: false,
  },
  ];

  public radarChartOptions = {
    responsive: true,
    scale: {
      ticks: {
        beginAtZero: true,
        min: 0,
        max: 4,
        stepSize: 1,
      },
      pointLabels: {
        fontSize: 15,
      }
    },
    legend: {
      onHover:this.chartClickEvent,
      position: 'right',
      labels: {
        fontColor: 'black',
        fontSize: 15,
      },
    }
  };
  public radarChartType = 'radar';

  chartClickEvent(event, array) {
    console.log(event)
   };
...
 

Я собираю этот ответ по частям из рабочего решения в модуле, который я только что написал. Это конкретное предложение не было полностью протестировано, но суть его здесь именно так, как оно работало в моем коде. Я собрал свой окончательный рабочий код, используя фрагменты кода из stackoverflow, но ничто из того, что я нашел, не выглядит так, как этот код (с использованием ViewChild и Angular click event wire-up), поэтому мое рабочее решение несколько уникально и ИМХО намного проще и понятнее.

ПРИМЕЧАНИЕ: Пока ссылка на холст ViewChild становится ссылкой на диаграмму во время выполнения, я думаю, что код является надежным. Мое рабочее решение создало объект диаграммы в коде TypeScript, где ваш создан в HTML, поэтому у меня была прямая ссылка на объект диаграммы, где этот код пытается использовать ссылку ViewChild .

Если нет, вам может потребоваться добавить оператор let в код события, чтобы извлечь объект диаграммы из ссылки на холст (что-то вроде let myChartObj = this.myChartCanvas.(chartProperty); ), а затем ссылаться на myChartObj вместо этого.Моя диаграмма в коде события)

ШАБЛОН

(Я добавил событие #chartCanvas и (щелчок))

 <div style="display: block">
<canvas #chartCanvas (click)="onChartClick($event)" id="radarChart" baseChart [datasets]="radarChartData" [labels]="radarChartLabels"
    [chartType]="radarChartType" [options]="radarChartOptions"></canvas> 

КОД КОМПОНЕНТА

Добавьте в свой импорт:

 import { Chart, ChartElement } from 'chart.js'; 

Добавьте в свой класс переменные:

 @ViewChild('chartCanvas') myChart; 

Ваш обработчик событий:

 onChartClick(event) {
  let ActivePoints: ChartElement[] = this.myChart.getElementsAtEvent(event);
  // to do - check ActivePoints for undefined, return if true
  let idx = ActivePoints[0]['_index'];
  let lbl: string = this.myChart.data.labels[idx];
  let dat = this.myChart.data.datasets[0].data[idx];
  console.log(lbl,dat);
}