ChartJS甜甜圈图例点击

Question

我对甜甜圈图上的自定义onClick函数有问题。我唯一需要做的就是重写默认图例onClick函数，该函数调用原始+我的自定义代码。根据他们的官方文档和github页上的建议，我编写了此js

var defaultLegendClickHandler = Chart.defaults.doughnut.legend.onClick;

var newLegendClickHandler = function (e, legendItem) {
    console.log(legendItem);
    defaultLegendClickHandler.call(this, e, legendItem);

};

然后我将其与onClick选项（JSfiddle here）关联，但是它不起作用。似乎legendItem变量始终是一个空数组，因此默认的click函数不执行任何操作。

Answer 1

您的JSfiddle看起来不错，除了newLegendClickHandler在options内部的错误位置定义。您应该在legend中定义它，如下所示。

legend: {
  position: 'top',
  onClick: newLegendClickHandler
},

也请从Chart.js中检查Custom On Click Actions文档

Answer 2

单击处理程序已设置为图表本身，而不是图例。将新的onClick处理程序移至图例选项内部。

var options = {
    cutoutPercentage: 20,
  responsive: true,
  legend: {
    position: 'top',
    onClick: newLegendClickHandler,
  },
  title: {
    display: true,
    text: 'Chart.js Doughnut Chart'
  },
  animation: {
    animateScale: true,
    animateRotate: true
  }
};