Question

ChartJS 甜甜圈图例点击

2020-02-12

840

javascript chart.js

我在使用甜甜圈图上的自定义 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
},

Please also check Custom On Click Actions from Chart.js documentation

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