Chart.js HTML自定义图例与甜甜圈图问题 [英] Chart.js HTML custom legend issues with doughnut chart
问题描述
我正在使用chart.js,并且遵循此创建一个自定义HTML图例. 问题是隐藏/显示功能不起作用.第一个图例单击会隐藏整个图表,而其他图例会产生错误:
Uncaught TypeError: Cannot read property '_meta' of undefined
at t.getDatasetMeta (Chart.min.self-b26766dbef822c075056eb7012dc36ae75970dc990497732f927d46ef6070858.js:11)
at HTMLLIElement.legendClickCallback (plot.self-416475a747a420b91c7fab454c07846f1043f55cc28f6d810fafeab61c56cf01.js:317)
因此它可以追溯到t.getDatasetMeta. 我要说的是,它与折线/条形图配合使用效果很好,因此这只是我的甜甜圈图坏了. 让我知道您是否需要更多信息. 哦,谢谢:P
问题是您只有一个数据集,并且代码使用图例项的index
单击以隐藏datasets[index]
.
相反,您需要隐藏单个项目数据,如下所示:
var meta = chart.getDatasetMeta(0);
var item = meta.data[index];
检查提琴是否已更新: https://jsfiddle.net/beaver71/aa2n39s2/ >
I'm working with chart.js and I followed this to create a custom HTML legend. The thing is, the hide/show functionality is not working. The first legend click hides the whole chart, while the others produce the error:
Uncaught TypeError: Cannot read property '_meta' of undefined
at t.getDatasetMeta (Chart.min.self-b26766dbef822c075056eb7012dc36ae75970dc990497732f927d46ef6070858.js:11)
at HTMLLIElement.legendClickCallback (plot.self-416475a747a420b91c7fab454c07846f1043f55cc28f6d810fafeab61c56cf01.js:317)
so it traces back to t.getDatasetMeta. I gotta say it's working great with line/bar charts, so its only my doughnut chart which breaks. Let me know if you need more info. Oh and thanks :P
EDIT: fiddle
The problem is that you have only one dataset and your code use the index
of legend item clicked to hide datasets[index]
.
On the contrary you need to hide single item data as below:
var meta = chart.getDatasetMeta(0);
var item = meta.data[index];
Check the fiddle updated: https://jsfiddle.net/beaver71/aa2n39s2/
这篇关于Chart.js HTML自定义图例与甜甜圈图问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!