我想在单击标签时更新饼图中的百分比值,因此我可以将默认图例 onClick 函数添加到也更新百分比值的自定义函数中。
ChartJs 版本 = 3.9.1
这些是我的图表选项:
options: {
responsive: true,
plugins:{
legend: {
onClick : function (e, legendItem, legend){
chart.defaults.plugins.legend.onClick(this, e, legendItem)
},
},
title: {
display: true,
text: name.charAt(0).toUpperCase() + name.slice(1),
},
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value*100 / sum).toFixed(2)+"%";
return percentage;
},
color: '#fff',
},
},
},
我收到以下错误:
未捕获类型错误:无法读取未定义的属性(读取“isDatasetVisible”)
编辑
使用此图例选项(我从源代码复制并粘贴了单击默认功能)
legend: {
onClick : function (e, legendItem, legend){
const index = legendItem.datasetIndex;
const ci = legend.chart;
if (ci.isDatasetVisible(index)) {
ci.hide(index);
legendItem.hidden = true;
} else {
ci.show(index);
legendItem.hidden = false;
};
},
我收到以下错误: 未捕获的类型错误:无法读取 null 的属性(读取“_resolveAnimations”)
我终于解决了这个问题。看来“chart.defaults.plugins.legend.onClick”已经过时了。 “onClick”函数真正的作用是:
legend.chart.toggleDataVisibility(legendItem.index);
legend.chart.update();
所以我复制此行并粘贴到 options.plugins.legend.onClick 中