onClick 事件隐藏数据集 Chart.js V2
Posted
技术标签:
【中文标题】onClick 事件隐藏数据集 Chart.js V2【英文标题】:onClick event to Hide dataset Chart.js V2 【发布时间】:2017-01-23 21:13:03 【问题描述】:如何从 Chart.js
制作 html 图例以隐藏/显示图表的 dataset
,就像 Chart.js
本身生成的图例一样
底部图例 -> Chart.js 图例
右侧图例-> HTML
我怎样才能点击“SETOR AGILIZA”并获得dataset
相对于它的隐藏/显示
我在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
事件中工作
标签名称取自数据库,因此可以更改。
更新 1
找到这个Github,试图让它工作
【问题讨论】:
【参考方案1】:所以,我在Post 之后做对了
这是帖子的代码
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
在这个例子中他使用了折线图,在我的例子中我使用了条形图
所以我为 list tags 更改了 table tags,这样我工作得更好
他强调将"window"放在获取"= new Chart"的变量之前
window.weightChart = new Chart(ctx, .....
然后用一点 CSS 你可以得到一个带有隐藏/显示选项的漂亮图例
【讨论】:
以上是关于onClick 事件隐藏数据集 Chart.js V2的主要内容,如果未能解决你的问题,请参考以下文章