javascript - 单击 : handleClick

Question

我使用的是 Chart.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

如何使图例单击照常工作并且仍然具有数据点单击的自定义功能？

Answer 1

我建议您向饼图的每个部分添加一个类或 ID。使用这个link 或者尝试下面的方法

  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);
       } 
   };