onClick事件以隐藏数据集Chart.js V2 [英] onClick event to Hide dataset Chart.js V2
问题描述
如何从 Chart.js
制作html图例,以隐藏/显示图表的 dataset
,就像由 Chart.js生成的图例一样
本身
How can I make a html legend from Chart.js
to hide/show the dataset
of the chart, like the legend generated by the Chart.js
itself
图例-> Chart.js图例
Legend on bottom -> Chart.js legend
图例-> HTML
如何单击"SETOR AGILIZA"并获取相对于它的 dataset
隐藏/显示
How can I click in "SETOR AGILIZA" and get the dataset
relative to it hide/show
我在chat.js/core.legend.js中找到了此代码
I found this code in the chat.js/core.legend.js core.legend
onClick: function(e, legendItem) {
var index = legendItem.datasetIndex;
var ci = this.chart;
var meta = ci.getDatasetMeta(index);
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
// We hid a dataset ... rerender the chart
ci.update();
},
但是我不知道如何使它在html图例中的 onClick
事件上工作
But I have no clue how to get it to work on a onClick
event in the html legend
标签名称来自数据库,因此可以更改.
the labels names are get from a database, so they can change.
更新1
找到了这个 Github ,试图使其工作
Found this Github, trying to make it work
推荐答案
因此,我按照帖子
这是帖子的代码
var weightChartOptions = {
responsive: true,
legendCallback: function(chart) {
console.log(chart);
var legendHtml = [];
legendHtml.push('<table>');
legendHtml.push('<tr>');
for (var i=0; i<chart.data.datasets.length; i++) {
legendHtml.push('<td><div class="chart-legend" style="background-color:' + chart.data.datasets[i].backgroundColor + '"></div></td>');
if (chart.data.datasets[i].label) {
legendHtml.push('<td class="chart-legend-label-text" onclick="updateDataset(event, ' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ')">' + chart.data.datasets[i].label + '</td>');
}
}
legendHtml.push('</tr>');
legendHtml.push('</table>');
return legendHtml.join("");
},
legend: {
display: false
}
};
// Show/hide chart by click legend
updateDataset = function(e, datasetIndex) {
var index = datasetIndex;
var ci = e.view.weightChart;
var meta = ci.getDatasetMeta(index);
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
// We hid a dataset ... rerender the chart
ci.update();
};
var ctx = document.getElementById("weightChart").getContext("2d");
window.weightChart = new Chart(ctx, {
type: 'line',
data: weightChartData,
options: weightChartOptions
});
document.getElementById("weightChartLegend").innerHTML = weightChart.generateLegend();
};
这里的秘密是第3行中的 legendCallback
the secret here is the legendCallback in line 3
在此示例中,他使用折线图,在我的情况下,我使用条形图
In this example he uses line chart, in my case I used bars
所以我将 list标记更改为 list标记,这样我的工作效果更好
So i changed the table tags for list tags for me worked better this way
他强调将窗口" 放在获得"= new Chart"
window.weightChart =新图表(ctx,{.....
window.weightChart = new Chart(ctx, {.....
然后使用少量CSS,您可以通过隐藏/显示选项获得漂亮的图例
Then with a little of CSS you can get a nice legend with a hide/show option
这篇关于onClick事件以隐藏数据集Chart.js V2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!