英文:
vue chartjs no strikethrough on legend click
问题
I've recently upgraded my site from vue 2 to vue 3 and as part of that I had to upgrade the versions of vue-chartjs and chartjs too.
Now after I change the legend text of my pie chart using the generateLabels
option (shown below), the strikethrough after clicking on a legend to hide the segment no longer works.
plugins: {
legend: {
labels: {
generateLabels: chart => {
const data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map((label, i) => {
const meta = chart.getDatasetMeta(0);
const style = meta.controller.getStyle(i);
return {
text: `${label}: ${this.isMoney ? StringHelper.FormatNumber(data.datasets[0].data[i], true) : data.datasets[0].data[i]}`,
fillStyle: style.backgroundColor,
strokeStyle: style.borderColor,
lineWidth: style.borderWidth,
hidden: isNaN(data.datasets[0].data[i]) || meta.data[i].hidden,
index: i,
};
});
}
return [];
},
padding: 30,
usePointStyle: true,
},
position: 'left',
},
}
How do I get the strikethrough again? I tried adding the onclick from this answer to the legend, but that just killed the pie chart completely.
By the looks of things - it's because the meta no longer has the hidden property in meta.data[i].hidden
as it is now just undefined
英文:
I've recently upgraded my site from vue 2 to vue 3 and as part of that I had to upgrade the versions of vue-chartjs and chartjs too.
Now after I change the legend text of my pie chart using the generateLabels
option (shown below), the strikethrough after clicking on a legend to hide the segment no longer works.
<!-- language: lang-js -->
plugins: {
legend: {
labels: {
generateLabels: chart => {
const data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map((label, i) => {
const meta = chart.getDatasetMeta(0);
const style = meta.controller.getStyle(i);
return {
text: `${label}: ${this.isMoney ? StringHelper.FormatNumber(data.datasets[0].data[i], true) : data.datasets[0].data[i]}`,
fillStyle: style.backgroundColor,
strokeStyle: style.borderColor,
lineWidth: style.borderWidth,
hidden: isNaN(data.datasets[0].data[i]) || meta.data[i].hidden,
index: i,
};
});
}
return [];
},
padding: 30,
usePointStyle: true,
},
position: 'left',
},
}
How do I get the strikethrough again? I tried adding the onclick from this answer to the legend, but that just killed the pie chart completely.
By the looks of things - it's because the meta no longer has the hidden property in meta.data[i].hidden
as it is now just undefined
答案1
得分: 0
看起来现在你可以通过查看 chart
对象的 _hiddenIndices
属性来确定一个段是否被隐藏:
hidden: chart._hiddenIndices[i] === true,
另一种方法是使用 getDataVisibility
,根据 yoduh 的评论:
hidden: !chart.getDataVisibility(i),
英文:
It looks like you can tell if a segment is hidden now by looking at the chart
object using the _hiddenIndices
property:
hidden: chart._hiddenIndices[i] === true,
Alternate way using getDataVisibility
per yoduh's comment:
hidden: !chart.getDataVisibility(i),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论