ChartJS柱状图自定义多条目图例实现方法求助

你当前的代码将所有柱子放在同一个数据集里，ChartJS只会为这个数据集生成单个图例条目。要显示A、B、C、D四个对应颜色的图例，需将对应颜色的柱子拆分为独立数据集，每个数据集对应一个图例标签，具体实现如下：

修改后的完整代码 #

<div class="container">
    <canvas id="myChart"></canvas>
</div>

<script>
    const ctx = document.getElementById('myChart');

    const data = {
      labels: ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7', 'D8', 'D9', 'D10'],
      datasets: [
        // 对应A（红色）：前3个柱子有数据
        {
          label: 'A',
          data: [1, 2, 3, null, null, null, null, null, null, null],
          backgroundColor: 'red'
        },
        // 对应B（蓝色）：第4-6个柱子有数据
        {
          label: 'B',
          data: [null, null, null, 4, 5, 6, null, null, null, null],
          backgroundColor: 'blue'
        },
        // 对应C（绿色）：第7-8个柱子有数据
        {
          label: 'C',
          data: [null, null, null, null, null, null, 7, 8, null, null],
          backgroundColor: 'green'
        },
        // 对应D（黑色）：第9-10个柱子有数据
        {
          label: 'D',
          data: [null, null, null, null, null, null, null, null, 9, 10],
          backgroundColor: 'black'
        }
      ]
    };
        
    const config = {
      type: 'bar',
      data: data,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        },
        legend: {
          position: 'top'
        }
      },
    };
    new Chart(ctx, config);
</script>

关键改动说明 #

• 拆分数据集：将原单个数据集拆分为4个独立数据集，每个数据集对应一个图例标签（A/B/C/D）和对应颜色
• 填充null值：每个数据集仅在对应位置填充原始数据，其余位置设为null，保证视觉效果和原图表一致，同时每个数据集对应一个图例条目
• 统一颜色设置：每个数据集直接设置单一backgroundColor，无需为每个柱子单独指定颜色

修改后图表会自动生成A、B、C、D四个图例条目，点击图例还可切换对应颜色柱子的显示状态，完全符合需求。

内容的提问来源于stack exchange，提问作者Leonardo Lima Ferreira