Highcharts柱状图按division分组并在图例显示分组名的实现问题

架构老林

2026-10-20

解决方案

你可以通过将数据按division拆分到多个独立series的方式实现需求，既可以保证同分组柱子颜色统一，也能直接使用Highcharts原生图例能力展示分组对应关系，具体实现步骤如下：

第一步：整理数据与分组映射
先定义好每个division对应的颜色映射，再提取所有location作为x轴的分类项：

// 示例原始数据，可替换为你的实际数据
const rawData = [
  { location: 'foo1', production: 10, division: 'division1' },
  { location: 'foo2', production: 20, division: 'division1' },
  { location: 'bar1', production: 15, division: 'division2' },
  { location: 'bar2', production: 25, division: 'division2' },
  { location: 'baz1', production: 30, division: 'division3' },
]
// division和颜色的映射规则
const divisionColorMap = {
  division1: 'red',
  division2: 'black',
  division3: 'blue'
}
// 提取x轴所有location分类
const xAxisCategories = rawData.map(item => item.location)

第二步：生成适配的series数组
每个division对应一个series，非当前division的位置填充null避免柱子错位：

const series = Object.entries(divisionColorMap).map(([divName, color]) => {
  return {
    name: `${divName}(${color})`,
    color: color,
    data: rawData.map(item => item.division === divName ? item.production : null)
  }
})

第三步：填入Highcharts配置
直接使用上述处理好的分类和series即可，无需额外修改图例配置，原生图例就会自动按你要求的格式展示，点击图例还可以实现对应division所有柱子的显示/隐藏交互：
```
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    categories: xAxisCategories
  },
  series: series
  // 其余你原有配置保持不变即可
})
```