chart.js 中的自定义过滤器图表

Question

我正在使用 chart.js 库开发 Web 应用程序。当用户单击图例的复选框时，我正在尝试为图表添加自定义过滤器。但是我不知道如何配置 chart.js 来调用我的自定义过滤器。

例如，这是我的应用程序的图表

然后我点击温度的复选框，温度图表被隐藏

当我点击 Temperature 的复选框时，Chart.js 调用他的默认点击功能来过滤图表。

我已经定义了自己的过滤函数：

  public newLegendClickHandler(e, legendItem) {
let index = legendItem.datasetIndex;

let ci = this.chart;
[ci.getDatasetMeta(0),
ci.getDatasetMeta(1),
ci.getDatasetMeta(2)].forEach(function (meta) {
  meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
});
ci.update();

}

当我点击复选框时，我想调用此函数而不是 Chart.js 默认过滤器函数。

我已经阅读了 chart.js 文档 "Custom On Click Actions" 并且，我不明白为什么 Chart.js 团队给出的示例中的图例属性为空。

如果您知道如何替换图例项的默认 onclick 函数，我将很高兴知道解决方案:)

提前致谢。

Answer 1

您可以使用图例的本机 onClick 事件处理程序方法。

所以..在您的图表选项中，定义以下内容：

options: {
   legend: {
      onClick: newLegendClickHandler
   },
   ...
}

这将覆盖图例的默认点击事件处理函数。

ᴅᴇᴍᴏ

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{
         label: 'LINE',
         data: [3, 1, 4],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)'
      }]
   },
   options: {
      legend: {
         onClick: newLegendClickHandler
      }
   }
});

function newLegendClickHandler() {
   alert('newLegendClickHandler function has been called!');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

chart.js 中的自定义过滤器图表

custom filter charts in chart.js

filter

chart.js

legend

items