Javascript onClick:handleClick

我正在使用chart.js 2.8.0版。我想在任何数据点上添加一个click事件，以深入到该数据点的更多细节。 我在折线图的选项下添加了以下内容：

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:

get executed:

---

如何使图例单击像往常一样工作，并且在数据点单击上仍然具有自定义功能

我建议您在饼图的每个部分添加一个类或id。用这个 或者试试下面的方法

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

---

我建议您在饼图的每个部分添加一个类或id。用这个 或者试试下面的方法

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

---

即使您定义了自己的

onClick

处理程序，单击事件仍然会传播到其他地方进行处理。正如您在下面的代码片段中所看到的，当您单击图例时，“onClick”被写入控制台，饼图的各个部分被隐藏或显示

函数handleClick（evt、legendItem、index、con）{
log（'onClick'）；
}
var pieChart=新图表（“myChart”{
键入“pie”，
数据：{
标签：[“红色”、“蓝色”、“黄色”]，
数据集：[{
数据：[8,5,6]，
背景颜色：[“#FF6384”、“#36A2EB”、“#FFCE56”]，
}]
},
选项：{
事件：[“单击”、“鼠标移动”、“touchstart”、“touchmove”]，
onClick:handleClick
}
})

---

即使您定义了自己的

onClick

处理程序，单击事件仍然会传播到其他地方处理。正如您在下面的代码片段中所看到的，当您单击图例时，“onClick”被写入控制台，饼图的各个部分被隐藏或显示

函数handleClick（evt、legendItem、index、con）{
log（'onClick'）；
}
var pieChart=新图表（“myChart”{
键入“pie”，
数据：{
标签：[“红色”、“蓝色”、“黄色”]，
数据集：[{
数据：[8,5,6]，
背景颜色：[“#FF6384”、“#36A2EB”、“#FFCE56”]，
}]
},
选项：{
事件：[“单击”、“鼠标移动”、“touchstart”、“touchmove”]，
onClick:handleClick
}
})

请您发布更多的代码。在不知道更多的情况下，这听起来可能是一个事件传播问题。尝试添加

evt.stopPropagation（）

作为

handleClick

中的第一行。请看，您能否发布更多代码。不知道更多信息，这听起来可能是一个事件传播问题。尝试添加

evt.stopPropagation（）

作为

handleClick

中的第一行。看见