Chart.js HTML 自定义图例问题与圆环图 [英] Chart.js HTML custom legend issues with doughnut chart

问题描述

我正在使用 chart.js，我按照 this创建自定义 HTML 图例.问题是，隐藏/显示功能不起作用.第一个图例点击隐藏了整个图表，而其他的则产生错误:

Uncaught TypeError: Cannot read property '_meta' of undefined在 t.getDatasetMeta (Chart.min.self-b26766dbef822c075056eb7012dc36ae75970dc990497732f927d46ef6070858.js:11)在 HTMLLIElement.legendClickCallback (plot.self-416475a747a420b91c7fab454c07846f1043f55cc28f6d810fafeab61c56cf01.js:317)

所以它追溯到 t.getDatasetMeta.我得说它与折线图/条形图配合得很好，所以它只有我的甜甜圈图坏了.如果您需要更多信息，请告诉我.哦，谢谢:P

fiddle

解决方案

问题是你只有一个数据集，你的代码使用index的图例项点击隐藏datasets[索引].

反之则需要隐藏单项数据如下:

var meta = chart.getDatasetMeta(0);var item = meta.data[索引];

检查小提琴更新:https://jsfiddle.net/beaver71/aa2n39s2/p>

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屋！