在Chart.js中，您可以通过单击顶部的标签来隐藏图表的某个部分。
- 带隐藏节饼图图片 *
我希望在启动时隐藏图表的某个部分。对于其他类型的图表，我会使用数据集隐藏属性，但饼图部分与数据集不对应。因此，如果您执行相同的操作，则会隐藏整个数据集，而不仅仅是所需的部分。
（其他信息：我使用包含多个数据集的饼图）
最接近我的解决方案是这个代码：
for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
meta = chart.getDatasetMeta(i);
meta.data[index].hidden = !meta.data[index].hidden;
}
chart.update();或者我可以覆盖generateLabels函数。
有谁能帮我找到更好的解决方案吗？
谢谢你
4条答案
按热度按时间gcmastyq1#
您可能会看到here及以下版本的插件实现。
第一个
使用
hiddenSlices属性提供要隐藏的切片，该属性应该是与现有切片对应的索引数组。如果设置了 *hiddenSlices，则使用hideSlicesPlugin，* 在所有数据集中隐藏切片。9ceoxa922#
创建图表后，可以通过
.getDatasetMeta(index)检索其元数据，更改所需切片的hidden属性，并更新图表，如以下代码片段所示。当用户单击隐藏切片的标签时，它将再次可见。第一个
f1tvaqid3#
这里提供的答案都不适用于Chart.js 3.2.1版（我正在使用的）。下面是我想到的（它是有效的）：
第一个
参考文献：
mgdq6dx14#
更新-2019年11月17日
不要这样做，在我写这篇文章的时候，我还是ChartJS和Web开发的新手，似乎上面的解决方案已经过时了，所以我试着用适合我的东西来回答。也许它也已经过时了，从那以后我就很少用ChartJS了。我转向了Echarts。
由于@xnakos的答案已经过时，我只是想分享同样的事情可以做得更容易在当前的ChartJS版本（2.7.3）.简单地设置值为
undefined，设置为其他值，如null将离开图例被看到（或不交叉）.第一个
这里有一个指向JSFiddle的链接，供您参考。http://jsfiddle.net/irfandyjip89/fokbgnvz/5/
但是，必须注意的是，如果你在饼图/甜甜圈上使用数据集，最好将其设置为
null。因为任何数据集中的一个undefined值都将跨越图例。***但是，如果您***在任何数据集上设置了一个
undefined值，则会导致图例被交叉（或删除线）。即使下一个数据集上有值。这意味着，如果您只使用一个数据集，并且不希望数据显示在图表中，也不希望图例交叉，则需要将值设置为
undefined。然而，null值将得到相同的结果，* 而 * 图例不交叉。然而，这是图表显示方式的偏好，但就我个人而言，如果我想跨越图例（通常在一个数据集图表上）并隐藏数据，我会使用
undefined值，如果我想只隐藏数据而不跨越图例（通常在多个数据集图表上），我会使用null值。如果您想查看处理多个数据集时的情况，可以查看http://jsfiddle.net/irfandyjip89/fokbgnvz/19/
**P.S.**如果您想知道我是如何将标签值放在中心的，请使用名为chartjs-plugin-datalabels的插件