你可以尝试这个
为隐藏的数据集创建存储库
window.chartName = new Chart(...
window.chartName.store = new Array();
然后使用此函数更新图表，必须通过单击图例项来处理
function updateDataset(legendLi, chart, label) {
var store = chart.store;
var exists = false;
for (var i = 0; i < store.length; i++) {
if (store[i][0] === label) {
exists = true;
chart.datasets.push(store.splice(i, 1)[0][1]);
legendLi.fadeTo("slow", 1);
}
}
if (!exists) {
for (var i = 0; i < chart.datasets.length; i++) {
if (chart.datasets[i].label === label) {
chart.store.push([label, chart.datasets.splice(i, 1)[0]]);
legendLi.fadeTo("slow", 0.33);
}
}
}
chart.update();
}
不要忘记在图表选项中更新图例模板
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li class=\"legend-item\" onclick=\"updateDataset($(this), window.chartName, '<%=datasets[i].label%>')\"><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
简而言之，我为 li 组件添加了此 onclick 处理程序
<li class=\"legend-item\" onclick=\"updateDataset($(this), window.chartName , '<%=datasets[i].label%>')\"><
这个功能现在可以在 Charts.js 中使用。
从文档 http://www.chartjs.org/docs/#chart-configuration-legend-configuration 中可以了解更多信息。
图例配置
图例配置被传递到 options.legend 命名空间中。全局的图表图例选项定义在 Chart.defaults.global.legend 中。
onClick function(event, legendItem) {} 当在标签项目上注册 'click' 事件时调用的回调函数
onHover function(event, legendItem) {} 当在标签项目上注册 'mousemove' 事件时调用的回调函数
。
https://www.chartjs.org/docs/latest/configuration/legend.html
我的示例代码版本，当单击数据集1的图例时隐藏数据集2和3（使用过滤函数隐藏数据集2和3的图例）：
public static readonly myChart: Chart.ChartConfiguration = {
type: 'line',
data: {
datasets: [
{
label: 'A',
borderColor: 'red',
fill: false,
lineTension: 0
},
{
label: 'B',
borderColor: 'blue',
fill: false,
lineTension: 0,
pointRadius: 0
},
{
borderColor: 'blue',
borderDash: [5, 10],
borderWidth: 1,
fill: false,
lineTension: 0,
pointRadius: 0
},
{
borderColor: 'blue',
borderDash: [5, 10],
borderWidth: 1,
fill: false,
lineTension: 0,
pointRadius: 0
}
]
},
options: {
legend: {
labels: {
filter: function(legendItem, chartData) {
if (legendItem.datasetIndex > 1) {
return false;
}
return true;
}
},
onClick: function(e, legendItem) {
const index = legendItem.datasetIndex;
if (index === 1) {
const ci = this.chart;
[
ci.getDatasetMeta(1),
ci.getDatasetMeta(2),
ci.getDatasetMeta(3)
].forEach(function(meta) {
meta.hidden = meta.hidden === null ? !ci.data.datasets[1].hidden : null;
});
ci.update();
} else {
// Do the original logic
Chart.defaults.global.legend.onClick.call(this, e, legendItem);
}
}
},
responsive: false,
animation: {
duration: 0
},
}
...
};
legend : {
}
var donutOptions = {
maintainAspectRatio : false,
responsive : true,
animation: {
animateScale: true,
animateRotate: true
},
tooltips: {
intersect: false,
callbacks: {
label: function (tooltipItem, data) {
...
}
},
},
plugins: {
datalabels: {
...
},
},
},
legend : {
}
};
donutChart.chart.getDatasetMeta(0).data[index].hidden = true;
donutChart.update();
我没找到解决方法。在图例模板上加入一些onclick行为很容易，你可以轻松地将系列描边和颜色alpha通道更改为0，使区域和描边消失，但我没找到对点这样做的方法。
我决定在这个特殊的图表中使用Google Charts，并在不需要该行为时使用chart.js，希望chart.js的优秀创建者们能在未来添加它。
onLegendClick: function (e) {
var series = e.target;
series.isVisible() ? series.hide() : series.show();
},
dxcharts有一个名为onLegendClick的函数，还有一些其他的函数如onSeriesClick和onPointClick。希望这可以帮到你。