如何在ChartJS中为同一组数据添加多个带对应配色的分类标签

以下是主流前端图表库的落地实现方案，核心逻辑都是为每个数据项标记分类，再绑定分类和颜色的映射规则即可：

ECharts 实现方案 #

• 先给原始数据新增type字段标记对应分类，示例数据结构如下：

const orderData = [
  // 过去一周数据
  { date: '10-01', value: 120, type: 'past' },
  { date: '10-02', value: 132, type: 'past' },
  // 剩余过去7天数据格式同上
  // 今日数据
  { date: '10-08', value: 98, type: 'today' },
  // 预排订单数据
  { date: '10-09', value: 80, type: 'future' },
  { date: '10-10', value: 120, type: 'future' },
]

• 在series的itemStyle配置中通过回调函数匹配对应颜色：

const option = {
  xAxis: {
    type: 'category',
    data: orderData.map(item => item.date)
  },
  yAxis: { type: 'value' },
  series: [
    {
      data: orderData.map(item => item.value),
      type: 'bar',
      itemStyle: {
        color: (params) => {
          const colorMap = {
            past: '#165DFF', // 蓝色对应过去一周
            today: '#FF7D00', // 橙色对应今日
            future: '#86909C' // 灰色对应预排订单
          }
          const currentType = orderData[params.dataIndex].type
          return colorMap[currentType]
        }
      }
    }
  ]
}

Chart.js 实现方案 #

• 定义颜色映射规则后生成和数据长度对应的颜色数组传入配置即可：

const colorMap = {
  past: '#165DFF',
  today: '#FF7D00',
  future: '#86909C'
}
// 生成对应颜色数组
const bgColors = orderData.map(item => colorMap[item.type])

const config = {
  type: 'bar',
  data: {
    labels: orderData.map(item => item.date),
    datasets: [{
      label: '订单量',
      data: orderData.map(item => item.value),
      backgroundColor: bgColors
    }]
  }
}

• 特殊场景简化方案：如果你的数据是按「过去一周→今日→预排订单」的时间顺序连续排列的，不需要额外新增type字段，直接在颜色匹配逻辑里通过数据下标dataIndex判断分类即可，不用修改原数据结构。
• 上述颜色值为参考值，可根据你的设计需求调整对应的十六进制颜色编码。

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