Chart.js：圆环图中两个数据集的图例

Question

我有一个包含两个数据集的 Chart.js 圆环图。图表本身效果很好，但图例没有按我的预期显示。

第一个数据集的三种颜色在图例中正确显示。但第二个数据集根本没有引用甜甜圈。它只显示所有标签，但从第一个数据集的第一种颜色获取其颜色。

如何为两个数据集提供正确的图例？

这是我的代码：

data = {
    labels: ['Red', 'Blue', 'Yellow', 'Orange', 'Dings', 'Bums', 'Yada'],
    datasets: [
      {
        data: [300, 50, 100],
        borderWidth: 1,
        backgroundColor: ['#CB4335', '#1F618D', '#F1C40F']
      },
      {
        data: [345.56, 56.47, 987.12, 78.01],
        borderWidth: 1,
        backgroundColor: ['#ff5604', '#ff0000', '#00ff00', '#0000ff']
      }
    ]
  };

  chartConfig = {
    type: 'doughnut',
    data: this.data,
    options: {
      responsive: true,
      plugins: {
        legend: {
          onClick: this.handleClick,
          onHover: this.handleHover,
          onLeave: this.handleLeave
        }
      }
    }
  };

Answer 1

如果您使用 Chart.js 版本 3.x 或更高版本。

在第一个数据集中填充图例背景颜色。

您分别为“data”、“backgroundColor”字段设置 null 或“ ”，如下例所示。

var ctx = document.getElementById('myChart');
var data = {
  labels: ['Red', 'Blue', 'Yellow', 'Pink', 'Lightgreen', 'Tomato', 'Orange'],
  datasets: [
    {
      data: [300, 50, 100, null, null, null, null, null],
      backgroundColor: ['red', 'blue', 'yellow', 'pink', 'lightgreen', 'tomato', 'orange'],
    },
    {
      data: [null, null, null, 345.56, 56.47, 987.12, 78.01],
      backgroundColor: [null, null, null, 'pink', 'lightgreen', 'tomato', 'orange'],
    },
  ],
};

var options = {
  responsive: true,
  plugins: {
    legend: {
      onClick: this.handleClick,
      onHover: this.handleHover,
      onLeave: this.handleLeave,
    },
  },
};

var myDoughnutChart = new Chart(ctx, {
  type: 'doughnut',
  data,
  options,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.6/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>