onClick: handleClick - PullRequest
Новая
       21

onClick: handleClick

1 голос
/ 14 февраля 2020

Я использую диаграмму. js версия 2.8.0. Я хочу добавить событие щелчка в любой точке данных, чтобы перейти к более подробной информации об этой точке данных. В опциях линейного графика я добавил следующее: 

options: {
  events: ['click', 'mousemove', 'touchstart', 'touchmove'],
  onClick: handleClick
}

Затем у меня есть функция js: 

function handleClick(evt, legendItem, index, con) {
  debugger;
  var activeElement = getTrafficTypeChartId().getElementAtEvent(evt);
  var ar = $('#datePicker').val().split('/');
  reloadChart(ar.reverse().join(''), activeElement[0]._chart.data.labels[activeElement[0]._index].substring(0, 2));
}

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

Я попытался добавить функцию к легенде: само свойство, но оно не выполняется, выполняется только обработчик в options:: https://www.chartjs.org/docs/2.7.2/configuration/legend.html?h=onclick

Как сделать так, чтобы щелчок легенды работал как обычно, и при этом все еще имелись пользовательские функции при щелчке данных?

Ответы [ 2 ]

0 голосов
/ 14 февраля 2020

Даже если вы определите свой собственный обработчик onClick, события щелчка по-прежнему распространяются для обработки в другом месте. Как видно из приведенного ниже фрагмента кода, при нажатии на легенду «onClick» записывается в консоль, а отдельные фрагменты диаграммы p ie скрываются или отображаются. 

function handleClick(evt, legendItem, index, con) {
  console.log('onClick');
}

var pieChart = new Chart("myChart", {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{      
      data: [8, 5, 6],
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
    }]
  },
  options: {
    events: ['click', 'mousemove', 'touchstart', 'touchmove'],
    onClick: handleClick
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Проблема должна заключаться в том, что при каждом клике вы заново создаете график с нуля, как может указывать следующая строка: 

reloadChart(ar.reverse().join(''), activeElement[0]._chart.data.labels[activeElement[0]._index].substring(0, 2));
0 голосов
/ 14 февраля 2020

Я предлагаю вам добавить класс или идентификатор для каждой части вашей таблицы p ie. используя эту ссылку или попробуйте этот метод ниже 

  var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
        var newLegendClickHandler = function (e, legendItem) {
        var index = legendItem.datasetIndex;

       if (index > 1) {
           // Do the original logic
          defaultLegendClickHandler(e, legendItem);
       } 
   };
...