如何在Highcharts中实现主类别对应不同子类别的堆叠柱状图

需求说明 #

产品按主功能-子功能层级分类，需制作堆叠柱状图：

• 每个主功能（如通信、导航）对应一个柱状条
• 主功能下的子功能作为堆叠子条，不同主功能的子功能数量可不同
• 现有嵌套字典格式数据：

const rawData = {
  '通信': {'通话': 69.0, '听声': 17.0, '字幕': 3.0},
  '导航': {'GPS定位': 41.0, '路线规划': 49.0},
  '娱乐': {'音频播放': 9.0, '视频播放': 11.0, '游戏': 19.0, '直播': 10.0}
};

解决方案步骤 #

1. 数据转换（无需重复拷贝）

直接从原始数据提取所有唯一子功能，为每个子功能生成对应的Highcharts系列数据，缺失子功能的主功能自动补0：

// 提取主功能列表作为X轴标签
const mainFunctions = Object.keys(rawData);
// 提取所有唯一子功能
const allSubFunctions = [...new Set(mainFunctions.flatMap(func => Object.keys(rawData[func])))];

// 生成每个子功能对应的系列数据
const series = allSubFunctions.map(subFunc => {
  return {
    name: subFunc,
    data: mainFunctions.map(func => rawData[func][subFunc] || 0)
  };
});

2. Highcharts配置实现堆叠

配置图表类型为column，开启堆叠模式，关联转换后的数据：

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: '产品功能分布堆叠柱状图'
  },
  xAxis: {
    categories: mainFunctions,
    title: {
      text: '主功能'
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: '占比/数值'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  },
  legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>总计: {point.stackTotal}'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    }
  },
  series: series
});

3. 配色优化（匹配目标风格）

参考目标图的柔和低饱和配色，可通过colors配置自定义系列颜色：

colors: ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9', '#F15C80', '#E4D354'],

也可使用Highcharts内置配色主题，或通过在线配色工具生成协调的低饱和色系，确保不同子功能色块区分清晰且视觉舒适。

关键优势 #

• 无需将原始数据转成纯数组再通过索引关联标签，直接从嵌套字典生成系列，避免数据冗余
• 自动适配不同主功能的子功能数量差异，缺失子功能自动补0不影响堆叠效果

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