charts - 如何向 Chart.js 圆环图显示第二组标签？

Question

我按照关于 SO 的其他问题成功地添加了第二组标签。
但现在我想显示所有标签的图例，第二组出现划掉。如何避免这种情况？
这是我的尝试:
https://jsfiddle.net/L5gs39u2/1/

  var platform_labels = ["Tablet","Ordenador"];
  var platform_dataset = [14,5];
  var os_labels = ["Android","Windows","GNU\/Linux"];
  var os_dataset = [14,4,1];
  var devices_labels = ["Tablet","Ordenador","Android","Windows","GNU\/Linux"];
  
  
  var chartColors = {
      red: 'rgb(255, 99, 132)',
      orange: 'rgb(255, 159, 64)',
      yellow: 'rgb(255, 205, 86)',
      green: 'rgb(75, 192, 192)',
      blue: 'rgb(54, 162, 235)',
      purple: 'rgb(153, 102, 255)',
      grey: 'rgb(201, 203, 207)'
  };


  var config = {
      type: 'doughnut',
      data: {
          datasets: [{
              data: platform_dataset,
              backgroundColor: [
                  chartColors.red,
                  chartColors.orange,
                  chartColors.yellow
              ],
              label: 'Platform',
              labels: platform_labels
          }, {
              data: os_dataset,
              backgroundColor: [
                  chartColors.purple,
                  chartColors.green,
                  chartColors.blue
              ],
              label: 'OS',
              labels: os_labels
          }],
          labels: devices_labels
      },
      options: {
          tooltips: {
              callbacks: {
                  label: function (tooltipItem, data) {
                      var dataset = data.datasets[tooltipItem.datasetIndex];
                      var index = tooltipItem.index;
                      return dataset.labels[index] + ": " + dataset.data[index];
                  }
              }
          }
      }
  };
  var ctx = document.getElementById('deviceChart').getContext('2d');
  var employeesGraph = new Chart(ctx, config);

Answer 1

您必须通过定义 legend.labels.generateLabels 自己生成图例标签。与 legend.onClick 一起使用负责隐藏和显示单个饼图的函数。这可能如下所示:

legend: {
  labels: {
    generateLabels: () => {
      let labels = [];
      config.data.datasets.forEach((ds, iDs) => labels = labels.concat(ds.labels.map((l, iLabel) => ({
        datasetIndex: iDs,
        labelIndex: iLabel,
        text: l,
        fillStyle: ds.backgroundColor[iLabel],
        hidden: employeesGraph ? employeesGraph.getDatasetMeta(iDs).data[iLabel].hidden : false,
        strokeStyle: '#fff'
      }))));
      return labels;
    }
  },
  onClick: (event, legendItem) => {
    const metaData = employeesGraph.getDatasetMeta(legendItem.datasetIndex).data;
    metaData[legendItem.labelIndex].hidden = !metaData[legendItem.labelIndex].hidden;
    employeesGraph.update();
  }
},

请在下面查看您修改后的代码:

var platform_labels = ["Tablet", "Ordenador"];
var platform_dataset = [14, 5];
var os_labels = ["Android", "Windows", "GNU\/Linux"];
var os_dataset = [14, 4, 1];
var devices_labels = ["Tablet", "Ordenador", "Android", "Windows", "GNU\/Linux"];

var chartColors = {
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(75, 192, 192)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(201, 203, 207)'
};

var config = {
  type: 'doughnut',
  data: {
    datasets: [{
      data: platform_dataset,
      backgroundColor: [
        chartColors.red,
        chartColors.orange,
      ],
      label: 'Platform',
      labels: platform_labels
    }, {
      data: os_dataset,
      backgroundColor: [
        chartColors.purple,
        chartColors.green,
        chartColors.blue
      ],
      label: 'OS',
      labels: os_labels
    }],
    labels: devices_labels
  },
  options: {
    legend: {
      labels: {
        generateLabels: () => {
          let labels = [];
          config.data.datasets.forEach((ds, iDs) => labels = labels.concat(ds.labels.map((l, iLabel) => ({
            datasetIndex: iDs,
            labelIndex: iLabel,
            text: l,
            fillStyle: ds.backgroundColor[iLabel],
            hidden: employeesGraph ? employeesGraph.getDatasetMeta(iDs).data[iLabel].hidden : false,
            strokeStyle: '#fff'
          }))));
          return labels;
        }
      },
      onClick: (event, legendItem) => {
        const metaData = employeesGraph.getDatasetMeta(legendItem.datasetIndex).data;
        metaData[legendItem.labelIndex].hidden = !metaData[legendItem.labelIndex].hidden;
        employeesGraph.update();
      }
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var dataset = data.datasets[tooltipItem.datasetIndex];
          var index = tooltipItem.index;
          return dataset.labels[index] + ": " + dataset.data[index];
        }
      }
    }
  }
};
var ctx = document.getElementById('deviceChart').getContext('2d');
var employeesGraph = new Chart(ctx, config);

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