Chart.js 饼图中自定义 HTML 图例问题

Question

我正在使用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

编辑：fiddle

- Johnny

---

你能否添加一个 JSfiddle 来展示这个代码？手动复制这么多代码太麻烦了。 - Phil

请注意，第一个图例会隐藏整个图表，而其余的则会产生错误。 https://jsfiddle.net/g0tpfL8j/244/ - Johnny

Answer 1

问题在于你只有一个数据集，而你的代码使用点击图例项的index来隐藏datasets[index]。

相反，你需要像下面这样隐藏单个项目数据：

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

请检查更新的示例代码：https://jsfiddle.net/beaver71/aa2n39s2/

- beaver

---

太棒了。我怀疑问题就是这样，因为只有第一个索引起作用。非常感谢@beaver！非常感激。 - Johnny