图 js 在图例中嵌套饼图标签颜色

Question

我正在尝试使用 2 个饼图并在图例中仅显示内部标签。 问题是标签颜色（在图例中）似乎取自外部数据集，可能是因为它是第一个。

我怎样才能改变它？

  var ctx = $("#myChart");
  var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['InnerLabel1','InnerLabebl2','InnerLabel3'],
      datasets: [{
        data: [1, 2, 1, 4],
        backgroundColor: [
          'rgba(31,119,180,0.5)','rgba(255,127,14,0.5)','rgba(255,127,14,0.5)','rgba(44,160,44,0.5)'
        ],
        labels: [
          'OuterLabel1','OuterLabel2','OuterLabel3','OuterLabel4'
        ]
      }, {
        data: [1, 3, 4],
        backgroundColor: [
          '#1f77b4','#ff7f0e','#2ca02c'
        ],
        labels: ['InnerLabel1','InnerLabebl2','InnerLabel3'],
      }, ]
    },
    options: {
      responsive: true,
      legend: {
        display: true,
      },
      tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
            var dataset = data.datasets[tooltipItem.datasetIndex];
            var index = tooltipItem.index;
            return dataset.labels[index] + ': ' + dataset.data[index];
          }
        }
      }
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="myChart"></canvas>

Answer 1

您可能必须自己生成图例标签，方法是定义一个 legend.labels.generateLabels 函数和一个负责隐藏和显示单个饼图切片的 legend.onClick。

这是如何做到这一点的尝试。

const innerDataset = {
  data: [1, 3, 4],
  backgroundColor: ['#1f77b4', '#ff7f0e', '#2ca02c'],
  labels: ['InnerLabel1', 'InnerLabebl2', 'InnerLabel3'],
};

var myChart = new Chart('myChart', {
  type: 'pie',
  data: {
    datasets: [{
        data: [1, 2, 1, 4],
        backgroundColor: ['rgba(31,119,180,0.5)', 'rgba(255,127,14,0.5)', 'rgba(255,127,14,0.5)', 'rgba(44,160,44,0.5)'],
        labels: ['OuterLabel1', 'OuterLabel2', 'OuterLabel3', 'OuterLabel4']
      },
      innerDataset
    ]
  },
  options: {
    responsive: true,
    legend: {
      display: true,
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var dataset = data.datasets[tooltipItem.datasetIndex];
          var index = tooltipItem.index;
          return dataset.labels[index] + ': ' + dataset.data[index];
        }
      }
    },
    legend: {
      labels: {
        generateLabels: () => innerDataset.labels.map((label, i) => ({
          text: label,
          fillStyle: innerDataset.backgroundColor[i],
          strokeStyle: '#fff',
          hidden: myChart ? myChart.getDatasetMeta(1).data[i].hidden : false
        }))
      },
      onClick: (event, legendItem) => {        
        const metaData = myChart.getDatasetMeta(1).data;
        const iData = innerDataset.labels.indexOf(legendItem.text);
        metaData[iData].hidden = !metaData[iData].hidden;
        myChart.update();
      }
    }
  }
});

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