Highcharts 堆叠条形图（完整教程）

什么是 Highcharts 堆叠条形图？

在数据可视化领域，图表的选择往往决定了信息传达的效率。对于需要展示多个类别中各组成部分占比的情况，Highcharts 堆叠条形图是一个非常实用的工具。它能直观地反映出每个类别内部不同数据系列之间的对比关系，尤其适合分析如“不同部门的销售构成”“各季度产品销量分布”等场景。

想象一下，你有一张条形图，每个条形被分成若干段，每一段代表一个子类别，颜色不同，长度不同。这种设计就像一块块积木叠在一起，整体条形的高度代表总数，而每一段的长度则代表该子类别的贡献程度。这就是堆叠条形图的核心思想——把“总和”拆解为“部分”。

Highcharts 堆叠条形图之所以受欢迎，是因为它不仅视觉清晰，还支持动态交互，比如鼠标悬停显示具体数值、点击切换显示模式，甚至可以导出为图片或 PDF。尤其在企业报表、仪表盘、数据分析平台中，它几乎是标配组件。

如何引入 Highcharts？

在开始画图之前，我们需要先把 Highcharts 引入项目。Highcharts 是一个成熟的 JavaScript 图表库，支持多种浏览器，包括移动端。它的官网提供了 CDN 链接，非常方便。

在 HTML 文件中添加如下代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Highcharts 堆叠条形图示例</title>
    <!-- 引入 Highcharts 的 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/highcharts@11.0.1/dist/highcharts.js"></script>
</head>
<body>
    <!-- 用于渲染图表的容器 -->
    <div id="container" style="width: 800px; height: 500px; margin: 0 auto;"></div>
</body>
</html>

注意：<script> 标签放在 <head> 中，确保在使用之前加载完成。id="container" 是图表的渲染容器，必须有明确的宽高，否则图表无法正常显示。

引入完成后，我们就可以在页面中创建图表了。接下来，我们进入核心环节——配置堆叠条形图。

配置堆叠条形图的基本结构

Highcharts 的图表配置是基于 JSON 格式的对象，我们通过 JavaScript 创建一个配置对象，然后传给 Highcharts.chart() 方法。

// 创建图表配置对象
const options = {
    // 图表类型：设置为 'bar' 表示条形图
    chart: {
        type: 'bar'
    },
    // 图表标题
    title: {
        text: '2024 年各地区销售额分布（堆叠）'
    },
    // X 轴配置
    xAxis: {
        categories: ['北京', '上海', '广州', '深圳', '杭州']
    },
    // Y 轴配置
    yAxis: {
        title: {
            text: '销售额（万元）'
        },
        // 启用堆叠功能，关键设置！
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: 'gray'
            }
        }
    },
    // 图例配置
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 100
    },
    // 数据系列
    series: [
        {
            name: '产品 A',
            data: [120, 80, 150, 90, 110]
        },
        {
            name: '产品 B',
            data: [60, 110, 70, 130, 80]
        },
        {
            name: '产品 C',
            data: [40, 50, 30, 60, 70]
        }
    ],
    // 启用堆叠
    plotOptions: {
        bar: {
            stacking: 'normal'  // 正常堆叠，每根条形是各系列数据之和
        }
    }
};

// 初始化图表
Highcharts.chart('container', options);

重点说明：

type: 'bar'：设置图表类型为条形图，水平条形。

stacking: 'normal'：这是开启堆叠的核心配置，值为 'normal' 表示普通堆叠（即数据相加），还有 'percent' 表示百分比堆叠。

stackLabels: { enabled: true }：在每个条形顶部显示总和，增强可读性。

plotOptions.bar.stacking：必须放在 plotOptions 下，作用是控制条形图的堆叠行为。

这个配置完成后，你就能看到一个完整的堆叠条形图了，每个条形由三个部分组成，分别代表三个产品在该地区的销售额。

实际案例：分析销售数据

我们以一家电商公司的销售数据为例。公司有五个城市门店，销售三种主要产品。我们想分析每个城市中，不同产品的销售贡献占比。

假设原始数据如下：

城市	产品 A（万元）	产品 B（万元）	产品 C（万元）
北京	120	60	40
上海	80	110	50
广州	150	70	30
深圳	90	130	60
杭州	110	80	70

我们将这些数据转换为 Highcharts 的 series 格式，如上代码所示。运行后，你会看到：

每个条形的总长度代表该城市总销售额。
条形内部的颜色块清晰区分产品 A、B、C。
条形顶部显示了总和（如北京总和为 220 万元），方便快速判断。

小技巧：如果数据量大，可以开启 tooltip 提示。在 options 中加入：

tooltip: {
    pointFormat: '{series.name}: {point.y} 万元<br/>占比: {point.percentage:.1f}%'
}

这样鼠标悬停时，会显示更详细的信息，比如具体数值和百分比。

高级功能：百分比堆叠与交互优化

有时候，我们更关心“相对比例”而非“绝对数值”。这时，可以使用百分比堆叠（stacking: 'percent'）。

plotOptions: {
    bar: {
        stacking: 'percent'  // 改为百分比堆叠
    }
}

此时，每根条形的高度都变为 100%，内部各部分按比例显示。比如北京的“产品 A”占 54.5%，产品 B 占 27.3%，产品 C 占 18.2%。这种形式更适合比较“结构差异”，比如判断哪个城市更依赖某类产品。

此外，还可以添加交互功能，比如点击图例隐藏某系列：

legend: {
    enabled: true,
    // 点击图例时，切换该系列的显示状态
    labelFormatter: function () {
        return this.name;
    }
}

Highcharts 会自动处理显示/隐藏逻辑，无需额外代码。

常见问题与调试建议

在实际使用中，初学者常遇到以下问题：

图表不显示：检查是否设置了 width 和 height，容器必须有尺寸。
堆叠不生效：确认 plotOptions.bar.stacking 是否正确设置为 'normal' 或 'percent'。
数据错位：确保 xAxis.categories 和 series.data 的长度一致，否则会报错。
中文乱码：如果出现乱码，可在 chart 中添加：

chart: {
    style: {
        fontFamily: 'Microsoft YaHei, sans-serif'
    }
}

建议在本地开发时使用浏览器开发者工具（F12）查看控制台错误，Highcharts 的错误信息通常很明确。

总结

Highcharts 堆叠条形图是数据可视化中非常实用的工具，尤其适合展示“总量由哪些部分构成”的场景。通过简单的配置，我们就能实现专业级的图表效果。

从基础配置到高级功能，从数值堆叠到百分比分析，Highcharts 提供了强大的灵活性。无论是做日报、周报，还是构建数据看板，掌握它都能让你的项目更具说服力。

最重要的是，它学习门槛低、文档完善、社区活跃，遇到问题很容易找到解决方案。如果你正在做数据展示相关的工作，不妨把 Highcharts 堆叠条形图加入你的工具箱。