onClick 事件隐藏数据集 Chart.js V2
onClick event to Hide dataset Chart.js V2
如何在图表的 dataset
中制作从 Chart.js
到 hide/show 的 html 图例,就像 Chart.js
本身生成的图例一样
底部图例 -> Chart.js 图例
右边的图例-> HTML
如何单击 "SETOR AGILIZA" 并获取相对于它的 dataset
hide/show
我在聊天中找到了这段代码。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,正在努力让它发挥作用
所以,我按照这个 Post
做对了
这是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
在这个例子中他使用折线图,在我的例子中我使用条形图
所以我将 table 标签 更改为 列表标签 这样我的效果更好
他强调把"window"放在"= new Chart[=13的变量前=]
window.weightChart = new Chart(ctx, {.....
然后用一点 CSS 你可以得到一个带有 hide/show 选项的漂亮图例
如何在图表的 dataset
中制作从 Chart.js
到 hide/show 的 html 图例,就像 Chart.js
本身生成的图例一样
底部图例 -> Chart.js 图例
右边的图例-> HTML
如何单击 "SETOR AGILIZA" 并获取相对于它的 dataset
hide/show
我在聊天中找到了这段代码。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,正在努力让它发挥作用
所以,我按照这个 Post
做对了这是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在这个例子中他使用折线图,在我的例子中我使用条形图
所以我将 table 标签 更改为 列表标签 这样我的效果更好
他强调把"window"放在"= new Chart[=13的变量前=]
window.weightChart = new Chart(ctx, {.....
然后用一点 CSS 你可以得到一个带有 hide/show 选项的漂亮图例