我正在使用chart.js库开发一个Web应用程序。我想在用户点击图例的复选框时为图表添加自定义过滤器。但是我不知道如何配置chart.js来调用我的自定义过滤器。
然后我点击Temperature的复选框,隐藏温度图表
当我登上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功能,我将很高兴知道解决方案:)
提前谢谢。
答案 0 :(得分: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>