настраиваемые диаграммы фильтров в chart.js

Я разрабатываю веб-приложение с использованием библиотеки chart.js. Я пытаюсь добавить настраиваемый фильтр для диаграмм, когда пользователь нажимает флажки легенды. Однако я не знаю, как настроить chart.js для вызова моего настраиваемого фильтра.

Например, вот диаграммы моего приложения введите описание изображения здесь

Затем я устанавливаю флажок «Температура», и график температуры скрывается.

введите описание изображения здесь

Когда я установил флажок «Температура», Chart.js вызвал свою функцию по умолчанию при щелчке, чтобы отфильтровать диаграммы.

Я определил свою собственную функцию фильтрации:

  public newLegendClickHandler(e, legendItem) {
let index = legendItem.datasetIndex;

let ci = this.chart;
[ci.getDatasetMeta(0),
ci.getDatasetMeta(1),
ci.getDatasetMeta(2)].forEach(function (meta) {
  meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
});
ci.update();

}

Когда я устанавливаю флажок, я хочу вызвать эту функцию, а не функцию фильтра Chart.js по умолчанию.

Я уже прочитал документацию chart.js «Настраиваемые действия при щелчке» и не понимаю, почему атрибут легенды пуст в примере, приведенном командой Chart.js.

Если вы знаете, как заменить функцию onclick по умолчанию для элементов легенды, я буду рад узнать решение :)

Заранее спасибо.


filter chart.js legend items
person Jordy    schedule 24.07.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать собственный onClick < / a> метод обработчика событий легенды.

Итак ... в параметрах диаграммы определите следующее:

options: {
   legend: {
      onClick: newLegendClickHandler
   },
   ...
}

это заменит стандартную функцию обработчика событий при нажатии легенды.

ᴅᴇᴍᴏ

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{
         label: 'LINE',
         data: [3, 1, 4],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)'
      }]
   },
   options: {
      legend: {
         onClick: newLegendClickHandler
      }
   }
});

function newLegendClickHandler() {
   alert('newLegendClickHandler function has been called!');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

person ɢʀᴜɴᴛ    schedule 24.07.2017
comment
Спасибо! Атрибут onClick решает мою проблему :) - person Jordy; 24.07.2017
comment
Есть ли способ также иметь поведение onclick по умолчанию? - person Jamshaid K.; 25.09.2018