javascript - 隐藏图例标签时 Chart.js 更新图表?
问题描述
Chart.js 3 - 我有一个甜甜圈图,它有一个图例,该图具有generateLabels
根据图形颜色更改文本颜色的功能。
plugins: {
legend: {
labels: {
generateLabels: (chart) => {
if (chart.data.labels.length && chart.data.datasets.length) {
return chart.data.labels.map((label, i) => ({
text: label,
fontColor: chart.data.datasets[0].backgroundColor[i],
fillStyle: chart.data.datasets[0].backgroundColor[i],
strokeStyle: '#fff',
hidden: myChart ? myChart.getDatasetMeta(0).data[i].hidden : false
}));
}
},
},
但是,如果图例项“隐藏”,我需要像过去一样使用默认行为更新图表并折叠图表中的数据。我可以手动完成,但它是硬编码值:
...
onClick: (event, legendItem) => {
const metaData = myChart.getDatasetMeta(0).data;
const iData = labs.indexOf(legendItem.text);
metaData[iData].hidden ? myChart.datasets[0].data[iData] = 0 :
myChart.data.datasets[0].data[iData] = 1;
metaData[iData].hidden = !metaData[iData].hidden;
myChart.update();
},
当图例项目有删除线并且“隐藏”时,如何获得图表更新的原始行为?
解决方案
推荐阅读
- python - 比较两个字符串及其索引,查看是否所有字符串 2 都在字符串 1 中,顺序相同但字母不同
- webpack - Angular CLI 代理:将不安全的本地 websocket 重定向到安全的远程 websocket
- mysql - 将 MySQL 查询结果插入表时如何设置字段的值
- go - Go mod tidy 从 go.mod 中删除 linter
- python - 如何让 python 能够访问网络
- python - 为在 Gunicorn 上运行的 Flask-SQLAlchemy 应用程序选择 DB pool_size
- sql - 如何使用带有 MONEY 数据类型的 WHERE 子句?
- javascript - 包含的页面 javascript 范围
- python - Python 正则表达式忽略空行
- javascript - 单击时自动重新加载延迟