求助：用Highcharts.js实现指定样式的分组堆叠柱状图

核心思路 #

按照Excel示例图的颜色逻辑，为相同数据类别（如同一项目名称）分配固定颜色，确保跨不同分组的同类别元素颜色一致，而非按系列顺序默认分配颜色。

具体实现步骤 #

1. 创建颜色映射表
   提取Excel图中各数据类别的对应颜色（用十六进制/RGB值表示），建立名称-颜色的映射关系：

   // 替换为你实际的类别名称和对应颜色
   const categoryColors = {
     "Direct": "#00B0F0",
     "Indirect": "#FFC000",
     "Not Charged": "#70AD47"
   };
   

2. 为系列绑定对应颜色
   在图表初始化时，遍历数据系列，根据系列名称从映射表中获取颜色并赋值：

   Highcharts.chart('container', {
     chart: { type: 'column' },
     title: { text: '你的图表标题' },
     xAxis: { categories: ['Jan', 'Feb', 'Mar'] }, // 替换为你的分组类别
     series: [
       { name: 'Direct', data: [10, 20, 15] },
       { name: 'Indirect', data: [5, 12, 8] },
       { name: 'Not Charged', data: [8, 15, 10] },
       { name: 'Direct', data: [12, 18, 22] },
       { name: 'Indirect', data: [7, 9, 14] },
       { name: 'Not Charged', data: [9, 11, 16] }
     ].map(series => ({
       ...series,
       color: categoryColors[series.name] // 绑定对应颜色
     }))
   });
   

3. 同步图例颜色
   图例颜色会自动跟随系列颜色，若需自定义图例文本颜色，可在legend配置中补充：

   legend: {
     itemStyle: {
       color: function() {
         return categoryColors[this.name];
       }
     }
   }
   

注意事项 #

• 确保数据系列的name属性与颜色映射表中的键完全匹配，大小写、空格需一致
• 若Excel图中存在渐变或特殊颜色，可使用对应的十六进制值或RGB/RGBA值替代

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