ChartJS：如何设置默认情况下隐藏的数据点？

Question

如果我使用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/

如果单击标题下的“蓝色”标签，它将在饼图中隐藏蓝色切片。默认情况下是否可以仅隐藏该蓝色切片，而不会破坏打开/关闭功能？

Answer 1

创建图表后，您可以通过.getDatasetMeta(index)检索其元数据，更改所需切片的.getDatasetMeta(index)属性并按如下所示更新图表。

hidden

const chart = new Chart(document.getElementById('myChart'), {
  type: 'pie',
  data: {
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
    datasets: [{
      data: [100, 100, 200, 300, 140],
      backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: true,
    title: {
      display: true,
      text: 'Colors - Sample Pie Chart'
    }
  }
});

chart.getDatasetMeta(0).data[4].hidden = true;    
chart.update();