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及其下方。

＆＃13;

// 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]
  }
});

＆＃13;

<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>

＆＃13;

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

Answer 2

创建图表之后，您可以通过.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();

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

Answer 3

由于@xnakos的答案已经过时，所以我只想分享在当前ChartJS版本（2.7.3）中可以更轻松地完成相同的事情。只需将值设置为undefined，将其设置为其他值，例如null，即可看到图例（或不交叉显示）。

var ctx = document.getElementById("myDoughnut").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Red", "Green", "Blue"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, undefined],
      // Set this value to undefined
      backgroundColor: [
        '#f87979',
        '#79f879',
        '#7979f8'
      ],
      borderWidth: 5
    }]
  },
  options: {
    tooltips: {
      mode: null
    },
    plugins: {
      datalabels: {
        borderWidth: 5,
        borderColor: "white",
        borderRadius: 8,
        // color: 0,
        font: {
          weight: "bold"
        },
        backgroundColor: "lightgray"
      }
    }
  }
});

<div id="app">
  <div width="400">
    <canvas id="myDoughnut"></canvas>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.4.0/dist/chartjs-plugin-datalabels.js"></script>

<!-- Made in 21 Nov 2018 -->
<!-- with ChartJS 2.7.3 -->

这里是JSFiddle的链接，供您玩耍。 http://jsfiddle.net/irfandyjip89/fokbgnvz/5/

但是，必须注意，如果您在Pie / Doughnut上使用数据集，最好将其设置为null。因为任何数据集中的一个undefined值都会穿过图例。

但是，如果您这样做 ，则在任何数据集上设置一个undefined值，将导致图例被交叉（或删除线）。 即使下一个数据集上有值。

这意味着，如果您仅使用一个数据集，并且不希望数据显示在图表中并且使图例相交，则需要将值设置为undefined。而null值将获得相同的结果，而不会出现图例。

不过，它偏向于如何显示图表，但个人而言，如果我想跨越图例（通常在一个数据集图表上）并隐藏数据，则我想使用undefined值，并将使用{如果我只想隐藏数据而不使图例交叉（通常在多个数据集图表上），则使用{1}}值。

如果要查看在处理多个数据集时的运行情况，可以检查此提琴http://jsfiddle.net/irfandyjip89/fokbgnvz/19/

PS 。如果您想知道如何将标签值放在中心，它使用的是名为chartjs-plugin-datalabels

的插件

Answer 4

此处提供的答案均不适用于 Chart.js 3.2.1 版（我正在使用的版本）。这是我想出的（并且有效）：

let ctx = document.getElementById('myChart').getContext('2d');

window.chart = new Chart(ctx, {
  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)'],
      hoverOffset: 6,
    }]
  },
  options: {
    layout: { padding: 10 },
    responsive: true,
    maintainAspectRatio: true,
    plugins: {
      title: {
        display: true,
        text: 'Colors - Sample Pie Chart'
      }
    }
  }
});

toggleData('red');

window.chart.render();

function toggleData(txt) {

    let ci = window.chart;
    let legendItems = ci.legend.legendItems;
    let index;
    for (index = 0; index < legendItems.length; ++index) {
        let legendItem = legendItems[index];
        if (legendItem.text.toLowerCase() === txt.toLowerCase()) {
            // let visible = chart.getDataVisibility(index);
            ci.toggleDataVisibility(index);
            ci.update();
            return;
        }
    }
}

/*
Note: Do not style the canvas element. See:
https://github.com/chartjs/Chart.js/issues/9089
*/
#myChartContainer {
  width:400px;
  height:400px;
}

<div id="myChartContainer">
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js"
        integrity="sha256-uVEHWRIr846/vAdLJeybWxjPNStREzOlqLMXjW/Saeo=" crossorigin="anonymous"></script>

参考文献：

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

4 个答案: