ChartJS:如何将数据点设置为默认隐藏?

bnlyeluc  于 2022-12-13  发布在  Chart.js
关注(0)|答案(2)|浏览(209)

如果我用ChartJS制作一个饼图,你可以打开或关闭一些切片。是否可以默认设置一个切片为关闭?

var config = {
  type: 'pie',
  data: {
    datasets: [{
      data: [
        100,
        100,
        200,
        300,
        140
      ],
      backgroundColor: [
        colors.red,
        colors.orange,
        colors.yellow,
        colors.green,
        colors.blue
      ]
    }],
    labels: [
      'Red',
      'Orange',
      'Yellow',
      'Green',
      'Blue'
    ]
  },
  options: {
    // responsive: true,
    maintainAspectRatio: true,
    title: {
      display: true,
      text: 'Colors - Sample Pie Chart'
    }
  }
};

以下是一个示例:
https://jsfiddle.net/6q1umfxz/
如果单击标题下的“蓝色”标签,将隐藏饼图中的蓝色扇区。是否可以在不破坏切换开/关功能的情况下,仅默认隐藏蓝色扇区?

wfsdck30

wfsdck301#

创建图表后,可以通过.getDatasetMeta(index)检索其元数据,更改所需切片的hidden属性,并按如下方式更新图表。
第一个

u7up0aaq

u7up0aaq2#

在chartjs的V3中,您可以使用它们提供的API来切换项目的可见性。

chart.toggleDataVisibility(2); // toggles the item in all datasets, at index 2
chart.update(); // chart now renders with item hidden

注意:只有圆环图/饼图、极坐标区域和条形图使用此选项。
同样的答案张贴在这个线程:如何在Chart.js饼图中隐藏节

相关问题