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

yfwxisqw 于 2023-10-18 发布在 Chart.js

关注(0)|答案(1)|浏览(204)

我有一个包含两个数据集的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
        }
      }
    }
  };

chart.js

来源：https://stackoverflow.com/questions/74560524/chart-js-legends-for-two-datasets-in-doughnut-chart

1条答案

按热度按时间

bnl4lu3b1#

如果您使用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>

Example: Legends for Multiple Chart Different Colors

var ctx = document.getElementById('myChart');
var data = {
  labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Tomato', 'Pink', 'Gray'],
  datasets: [
    {
      data: [20, 40, 50, null, null, null, null, null],
      backgroundColor: ['#ff6384', '#ff9f40', '#ffcd56', '#4bc0c0', '#36a2eb', 'tomato', 'pink', 'gray'],
    },
    {
      data: [null, null, null, 60, 10, 20],
      backgroundColor: [null, null, null, '#4bc0c0', '#36a2eb', 'tomato'],
    },
    {
      data: [null, null, null, null, null, null, 20, 40],
      backgroundColor: [null, null, null, null, null, null, 'pink', 'gray'],
    },
  ],
};

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>

赞(0）回复(0）举报 2023-10-18

我来回答

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

1条答案

相关问题

热门标签

最新问答