Highcharts 堆叠柱形图（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在数据可视化领域，柱形图因其直观性和易读性，成为展示数据分布的常用工具。而 Highcharts 堆叠柱形图则在此基础上更进一步，通过将多个数据系列垂直堆叠，清晰地呈现不同类别在整体中的占比关系。无论是分析市场细分、资源分配，还是追踪项目进度，堆叠柱形图都能以简洁的方式传递复杂信息。本文将从基础概念讲起，结合代码示例和实际案例，帮助读者掌握这一工具的核心用法。

一、Highcharts 堆叠柱形图的核心概念

1.1 什么是堆叠柱形图？

堆叠柱形图（Stacked Column Chart）是一种将多个数据系列“堆叠”在同一根柱子上的图表类型。每一根柱子代表一个主分类（如月份、地区），而柱子内部的分段则对应不同子分类（如产品类型、用户群体）。这种设计使用户能同时看到整体总量和各部分的贡献比例，例如：

• 整体视角：某季度总销售额为 100 万元；
• 细分视角：其中线上渠道贡献了 60%，线下渠道占 40%。

形象比喻：可以将其想象为乐高积木的堆叠——每一层积木代表一个数据子类，而整个柱子的高度则是所有积木的高度之和。

1.2 Highcharts 的优势

Highcharts 是一款开源的 JavaScript 图表库，凭借以下特点成为堆叠柱形图开发的首选工具：

• 跨平台兼容性：支持主流浏览器和移动设备；
• 丰富的配置选项：从颜色、交互到动画效果均可自定义；
• 动态数据更新：可实时响应用户操作或 API 请求；
• 社区支持：拥有庞大的文档库和活跃的开发者社区。

二、Highcharts 堆叠柱形图的实现步骤

2.1 环境准备

2.1.1 引入 Highcharts 库

通过 CDN 引入 Highcharts 核心库及堆叠柱形图插件：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

2.1.2 创建 HTML 容器

在 HTML 文件中定义图表渲染区域：

<div id="container" style="width: 100%; height: 400px;"></div>

2.2 基础配置与代码示例

2.2.1 最简配置模板

以下代码展示如何生成一个基本的堆叠柱形图：

Highcharts.chart('container', {
    chart: {
        type: 'column' // 指定图表类型为柱形图
    },
    title: {
        text: '季度销售数据堆叠分析'
    },
    xAxis: {
        categories: ['Q1', 'Q2', 'Q3', 'Q4'] // 主分类（如季度）
    },
    yAxis: {
        title: {
            text: '销售额（万元）'
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal' // 启用堆叠模式
        }
    },
    series: [{
        name: '线上渠道',
        data: [20, 35, 30, 40]
    }, {
        name: '线下渠道',
        data: [15, 25, 20, 35]
    }]
});

关键点解析：

• stacking: 'normal' 是启用堆叠模式的核心配置；
• series 数组中的每个对象代表一个子分类，数据值需与主分类数量一致。

2.2.2 颜色与样式的定制

通过 colors 和 dataLabels 可增强图表的可读性：

Highcharts.chart('container', {
    // ...其他配置保持不变...
    colors: ['#2E86C1', '#F1948A'], // 设置系列颜色
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true, // 显示数据标签
                format: '{y}' // 显示数值
            }
        }
    }
});

三、进阶配置与案例解析

3.1 响应式设计与交互功能

3.1.1 图表自适应屏幕

通过 chart 的 responsive 配置，可针对不同设备调整布局：

chart: {
    type: 'column',
    responsive: {
        rules: [{
            condition: {
                maxWidth: 600
            },
            chartOptions: {
                xAxis: {
                    labels: {
                        style: {
                            fontSize: '10px'
                        }
                    }
                }
            }
        }]
    }
}

3.1.2 添加悬停提示与导出按钮

Highcharts 内置了 tooltip 和 exporting 模块，可快速实现交互功能：

tooltip: {
    headerFormat: '<b>{point.key}</b><br/>', // 自定义悬停标题
    pointFormat: '{series.name}: {point.y} 万元<br/>'
},
exporting: {
    enabled: true // 启用导出按钮
}

3.2 多系列堆叠与负值处理

3.2.1 多系列堆叠场景

当存在多个子分类时，堆叠柱形图能清晰展示各部分贡献。例如分析某产品的销售额来源：

series: [{
    name: '电商平台',
    data: [25, 30, 45, 60]
}, {
    name: '实体店',
    data: [10, 15, 20, 25]
}, {
    name: '直播带货',
    data: [5, 8, 12, 18]
}]

3.2.2 处理负值数据

若数据包含负值（如盈亏分析），可设置 stacking: 'percent' 将数值转换为百分比：

plotOptions: {
    column: {
        stacking: 'percent'
    }
}

此时，柱子总高度固定为 100%，负值会以向下延伸的方式呈现。

四、常见问题与解决方案

4.1 问题1：柱子显示为独立而非堆叠

原因：未在 plotOptions 中设置 stacking: 'normal'。
解决：检查配置代码，确保该参数正确添加。

4.2 问题2：数据标签重叠或显示不全

解决方法：

• 调整字体大小：

  dataLabels: { style: { fontSize: '8px' } }
  

• 启用自动换行：

  dataLabels: { allowOverlap: true, crop: false }
  

4.3 问题3：动态更新数据后图表未刷新

解决：使用 chart.series[0].setData(newData) 方法，并确保数据格式与原始配置一致。

五、实战案例：电商年度销售分析

5.1 需求背景

某电商平台希望分析全年各季度的销售数据，重点关注线上与线下渠道的贡献比例。

5.2 完整代码实现

document.addEventListener('DOMContentLoaded', function () {
    Highcharts.chart('container', {
        chart: {
            type: 'column',
            zoomType: 'x' // 启用 X 轴缩放
        },
        title: {
            text: '2023 年电商销售数据堆叠分析'
        },
        xAxis: {
            categories: ['Q1', 'Q2', 'Q3', 'Q4'],
            crosshair: true // 添加垂直辅助线
        },
        yAxis: [{
            title: {
                text: '销售额（万元）'
            }
        }, {
            title: {
                text: '增长率（%）'
            },
            opposite: true // 右侧 Y 轴
        }],
        tooltip: {
            shared: true // 同一 X 值的系列共享提示框
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series: [{
            name: '线上渠道',
            data: [25, 40, 55, 70],
            yAxis: 0 // 绑定左侧 Y 轴
        }, {
            name: '线下渠道',
            data: [15, 25, 30, 35],
            yAxis: 0
        }, {
            name: '环比增长率',
            data: [10, -5, 12, 8],
            type: 'line', // 添加折线图展示增长率
            yAxis: 1,
            dashStyle: 'Dash' // 虚线样式
        }]
    });
});

5.3 效果说明

• 双 Y 轴设计：左侧显示销售额，右侧显示环比增长率；
• 折线图叠加：通过 type: 'line' 将增长率以折线形式叠加，增强对比效果；
• 交互功能：支持鼠标悬停提示和 X 轴缩放。

六、总结与扩展

通过本文，读者已掌握了 Highcharts 堆叠柱形图 的核心配置、进阶技巧及实战案例。这一工具不仅能简化复杂数据的可视化，还能通过交互功能提升用户分析效率。对于更高级的应用场景，可进一步探索以下方向：

1. 3D 效果：通过 highcharts-3d.js 插件增强视觉层次；
2. 数据绑定：结合后端 API 实现实时数据更新；
3. 自定义主题：通过 Highcharts.setOptions() 创建品牌化图表样式。

数据可视化的最终目标是“让数据说话”，而 Highcharts 堆叠柱形图 正是实现这一目标的利器之一。通过持续练习和探索，开发者能将其灵活运用于商业分析、科研报告等多样化场景中。