Highcharts 堆叠组柱形图（实战总结）

Highcharts 堆叠组柱形图：让数据对比更直观

在数据可视化领域，柱形图是最常见的图表类型之一。它用柱子的高度表示数值大小，直观明了。但当你面对多个类别、多个子类别的数据时，简单的柱形图就显得力不从心了。这时候，Highcharts 堆叠组柱形图就派上用场了。

想象一下你是一个销售经理，需要比较四个季度中，不同产品线（比如 A、B、C）的销售额。如果每个季度只画一个柱子，那四个产品线的数据就只能并列显示，对比起来非常吃力。而如果用堆叠组柱形图，每个季度的柱子被分成三段，分别代表 A、B、C 三个产品线的贡献，你就一眼就能看出哪个产品在哪个季度表现最好，哪个季度整体销量最高。

Highcharts 堆叠组柱形图正是为这种多维度对比场景设计的利器。它不仅支持垂直堆叠，也支持水平堆叠，还能灵活配置颜色、图例、提示框等交互元素。接下来，我们就一步步带你掌握它的核心用法。

什么是堆叠组柱形图？原理与适用场景

堆叠组柱形图是柱形图的一种高级形式。它的核心特点是：将多个数据系列（series）的值在同一个柱子上垂直叠加，形成“堆叠”的视觉效果。

举个例子：假设你有三组数据，分别代表三个部门在不同月份的业绩。如果用普通柱形图，每个部门会单独占一个柱子，四个月份就是十二个柱子，看起来杂乱无章。而堆叠组柱形图会把每个月的三个部门数据合并成一个柱子，三段颜色不同的部分从下往上堆叠，整体高度代表该月总业绩。

这种图表非常适合以下场景：

• 比较多个类别的总和（如各地区总销售额）
• 分析总和中各部分的占比（如某产品线在总销量中的贡献）
• 观察趋势变化（如不同年份各季度的累计增长）

它就像一座“数据积木塔”：每一层代表一个数据系列，塔的总高度代表整体，每层的厚度代表该部分的贡献。

快速上手：创建一个基础堆叠组柱形图

下面是一个最基础的 Highcharts 堆叠组柱形图代码示例。我们来一步步解析。

// 引入 Highcharts 库（通过 CDN）
// <script src="https://code.highcharts.com/highcharts.js"></script>

// 创建图表容器（HTML 中必须有 id 为 chart-container 的 div）
// <div id="chart-container" style="width: 100%; height: 400px;"></div>

// 初始化图表配置
Highcharts.chart('chart-container', {
    // 图表标题
    title: {
        text: '2024 年各季度产品线销售额'
    },

    // X轴（分类轴）配置
    xAxis: {
        categories: ['第一季度', '第二季度', '第三季度', '第四季度']
    },

    // Y轴（数值轴）配置
    yAxis: {
        title: {
            text: '销售额（万元）'
        },
        // 启用堆叠模式
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: 'gray'
            }
        }
    },

    // 图例配置
    legend: {
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom'
    },

    // 数据系列（即要绘制的多组数据）
    series: [
        {
            name: '产品线 A',
            data: [120, 150, 180, 200],
            stack: 'a' // 堆叠组标识，同组才会堆叠
        },
        {
            name: '产品线 B',
            data: [80, 100, 120, 140],
            stack: 'a'
        },
        {
            name: '产品线 C',
            data: [60, 70, 90, 110],
            stack: 'a'
        }
    ],

    // 启用堆叠功能（全局配置）
    plotOptions: {
        column: {
            stacking: 'normal' // 正常堆叠，即垂直堆叠
        }
    }
});

代码说明：

• stack: 'a' 是关键！所有属于同一堆叠组的系列必须使用相同的 stack 值，这样 Highcharts 才知道它们要堆叠在一起。
• plotOptions.column.stacking: 'normal' 表示启用堆叠模式，normal 是默认值，表示普通堆叠。
• yAxis.stackLabels.enabled: true 可以在每个柱子顶部显示堆叠总和，方便快速查看总销售额。
• series 中的 name 会显示在图例中，data 是对应每个分类的数值。

深入理解：堆叠组的“分组”机制

Highcharts 堆叠组柱形图的“堆叠”不是自动发生的。它依赖于一个叫做 堆叠组（stack group） 的概念。你可以把堆叠组理解为“积木的盒子”——只有放进同一个盒子的积木，才会被堆叠起来。

举个例子：如果你有两组数据，一组是“产品销售额”，另一组是“产品退货量”，它们的单位不同，数值也正负相反，就不该堆叠在一起。这时你可以这样设计：

series: [
    {
        name: '销售额',
        data: [100, 120, 150, 180],
        stack: 'sales' // 放进 "sales" 盒子
    },
    {
        name: '退货量',
        data: [-10, -15, -20, -25],
        stack: 'returns' // 放进 "returns" 盒子
    }
]

这样，每个季度的柱子会分别显示“销售额”和“退货量”两个堆叠部分，互不干扰。你甚至可以设置 stacking: 'percent' 来显示百分比堆叠，让每个柱子的总高度为 100%，便于观察占比变化。

实战案例：分析用户活跃度的堆叠组柱形图

我们来做一个更贴近实际的案例：分析某 App 在不同城市中，用户在“登录”、“浏览”、“下单”三个行为上的活跃度。

Highcharts.chart('chart-container', {
    title: {
        text: '2024 年 Q2 各城市用户行为活跃度'
    },
    xAxis: {
        categories: ['北京', '上海', '广州', '深圳', '成都']
    },
    yAxis: {
        title: {
            text: '活跃用户数（人）'
        },
        stackLabels: {
            enabled: true,
            formatter: function() {
                return this.total + ' 人'; // 自定义堆叠标签显示格式
            }
        }
    },
    legend: {
        align: 'right',
        verticalAlign: 'top'
    },
    series: [
        {
            name: '登录',
            data: [5200, 4800, 3900, 4100, 3500],
            stack: 'activity'
        },
        {
            name: '浏览',
            data: [4500, 4200, 3800, 3700, 3300],
            stack: 'activity'
        },
        {
            name: '下单',
            data: [1200, 1100, 900, 1000, 850],
            stack: 'activity'
        }
    ],
    plotOptions: {
        column: {
            stacking: 'normal',
            pointWidth: 30, // 调整柱子宽度
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#333',
                formatter: function() {
                    return this.y + '人'; // 每个柱子内部显示具体数值
                }
            }
        }
    }
});

关键点解析：

• pointWidth: 30 让柱子更紧凑，适合横向较多的数据。
• dataLabels 配置让每个子堆叠部分内部显示具体数值，提升可读性。
• formatter 函数允许你自定义标签内容，比如加单位或格式化数字。

这个图表一目了然：北京的用户最活跃，尤其是登录和浏览行为；成都虽然总人数少，但下单比例相对高，说明用户转化率不错。

高级配置：自定义样式与交互

Highcharts 的强大之处在于它的高度可定制性。你可以通过 colors、tooltip、events 等配置项进一步优化图表。

tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: <b>{point.y} 人</b><br/>占比: <b>{point.percentage:.1f}%</b>',
    shared: true // 多系列共享提示框
},
colors: ['#4CAF50', '#2196F3', '#FF9800'], // 自定义颜色
plotOptions: {
    column: {
        stacking: 'percent', // 改为百分比堆叠
        dataLabels: {
            enabled: true,
            formatter: function() {
                return this.percentage.toFixed(1) + '%';
            }
        }
    }
}

• stacking: 'percent' 会让每个柱子的总高度为 100%，便于比较各行为在总活跃中的占比。
• tooltip.shared: true 让鼠标悬停时，同时显示所有系列的数据，提升交互体验。
• colors 可以统一更换配色方案，让图表更美观。

小结与建议

Highcharts 堆叠组柱形图是一个非常实用的工具，尤其适合需要对比多个子类数据在整体中占比的场景。它不是简单的“柱子变多”，而是通过视觉堆叠，揭示数据背后的结构关系。

在实际项目中，建议：

• 合理使用 stack 分组，避免不同含义的数据混叠。
• 开启 stackLabels 和 dataLabels，增强可读性。
• 根据数据特点选择 normal 或 percent 堆叠模式。
• 保持颜色简洁，避免过多色块造成视觉疲劳。

掌握 Highcharts 堆叠组柱形图，你就能在数据展示中脱颖而出，让枯燥的数字“说话”。无论是业务汇报、产品分析，还是用户行为研究，它都能成为你手中的一把利器。