Chart.js：如何根据柱状图背景颜色自定义图例及对应标签

你遇到的问题是因为Chart.js默认的图例是按数据集（dataset）数量生成条目，如果你把所有柱子放在同一个dataset里，仅传入backgroundColor颜色数组，系统只会生成1条图例，没有设置dataset的label就会显示undefined。可以根据你的业务场景选择以下两种方案实现需求：

方案1：自定义图例生成（单数据集场景适用） #

如果你的X轴每个分类下只有1根柱子，每根柱子对应一个大洲，用这个方案不需要调整数据结构，直接修改图例配置即可：

const myChart = new Chart(document.getElementById('barChart'), {
  type: 'bar',
  data: {
    labels: ['一线城市', '二线城市', '三线城市', '四线城市', '五线城市'], // 替换为你的X轴标签
    datasets: [{
      data: [2300, 1800, 1200, 800, 500], // 替换为你的实际数据
      backgroundColor: [
        '#FF6384', // 亚洲
        '#36A2EB', // 欧洲
        '#FFCE56', // 非洲
        '#4BC0C0', // 美洲
        '#9966FF'  // 大洋洲
      ]
    }]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          // 自定义生成图例条目
          generateLabels: (chart) => {
            // 自定义颜色和大洲的映射关系，按你的实际配置修改
            const continentConfig = [
              { color: '#FF6384', name: '亚洲' },
              { color: '#36A2EB', name: '欧洲' },
              { color: '#FFCE56', name: '非洲' },
              { color: '#4BC0C0', name: '美洲' },
              { color: '#9966FF', name: '大洋洲' }
            ]
            return continentConfig.map(item => ({
              text: item.name,
              fillStyle: item.color,
              strokeStyle: item.color,
              hidden: chart.getDatasetMeta(0).data[continentConfig.indexOf(item)].hidden
            }))
          }
        },
        // 可选配置：点击图例切换对应柱子显隐
        onClick: (e, legendItem, legend) => {
          const chart = legend.chart
          const barMeta = chart.getDatasetMeta(0).data[legendItem.index]
          barMeta.hidden = !barMeta.hidden
          chart.update()
        }
      }
    }
  }
})

方案2：拆分多数据集（多系列柱状图适用） #

如果你的X轴每个分类下有多个柱子，每个大洲对应一个系列，直接把每个大洲拆分为独立的dataset，Chart.js会自动生成对应图例：

const myChart = new Chart(document.getElementById('barChart'), {
  type: 'bar',
  data: {
    labels: ['2020年', '2021年', '2022年', '2023年', '2024年'], // 替换为你的X轴标签
    datasets: [
      {
        label: '亚洲',
        data: [1200, 1300, 1400, 1500, 1600],
        backgroundColor: '#FF6384'
      },
      {
        label: '欧洲',
        data: [800, 850, 900, 950, 1000],
        backgroundColor: '#36A2EB'
      },
      {
        label: '非洲',
        data: [600, 650, 700, 750, 800],
        backgroundColor: '#FFCE56'
      }
      // 其余大洲按同样格式追加即可
    ]
  },
  options: {
    plugins: {
      legend: {
        display: true
      }
    }
  }
})

内容的提问来源于stack exchange，提问作者Yige Song