chart.js - 如何隐藏 Chart.js 饼图中的部分

Question

在 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 函数。

谁能帮我找到更好的解决方案？

谢谢

Answer 1

您可能会看到作为插件的实现 here和下面。

// A plugin that hides slices, given their indices, across all datasets.
var hideSlicesPlugin = {
  afterInit: function(chartInstance) {
    // If `hiddenSlices` has been set.
    if (chartInstance.config.data.hiddenSlices !== undefined) {
      // Iterate all datasets.
      for (var i = 0; i < chartInstance.data.datasets.length; ++i) {
        // Iterate all indices of slices to be hidden.
        chartInstance.config.data.hiddenSlices.forEach(function(index) {
          // Hide this slice for this dataset.
          chartInstance.getDatasetMeta(i).data[index].hidden = true;
        });
      }
      chartInstance.update();
    }
  }
};

Chart.pluginService.register(hideSlicesPlugin);

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      data: [15, 1, 1, 1, 45, 1],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }, {
      data: [5, 1, 25, 10, 5, 1],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }],
    // Hide the second (index = 1) and the fourth (index = 3) slice.
    hiddenSlices: [1, 3]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

使用 hiddenSlices 提供要隐藏的切片属性，它应该是与现有切片对应的索引数组。使用 hideSlicesPlugin 在所有数据集中隐藏切片, 如果 hiddenSlices已经设置好了。