我希望在单击标签时更新饼图中的百分比值,因此我认为可以将默认的图例onClick函数添加到也更新百分比值的自定义函数中。
图表版本= 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")
1条答案
按热度按时间3hvapo4f1#
我终于设法解决了这个问题。看起来“chart.defaults.plugins.legend.onClick”已经过时了。“onClick”函数真正做的是这样的:
所以我复制了这几行并粘贴到options.plugins.legend.onClick中