首页
/ 正文

Highcharts 堆叠条形图（手把手讲解）

更新时间: 2025-03-26 01:09:03

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 实现这一图表类型，并通过案例演示和代码示例，帮助读者掌握其核心技巧。

堆叠条形图的核心概念

什么是堆叠条形图？

堆叠条形图（Stacked Bar Chart）是一种基于条形图的扩展形式。它通过将多个数据系列的值沿同一轴向“堆叠”展示，形成一条条“组合条”。例如，假设我们要分析某公司各季度的销售额，其中包含线上、线下和海外三个渠道，堆叠条形图可以将这三个渠道的销售额叠加在同一季度的条形中，既显示每个渠道的具体数值，又总和显示该季度的总销售额。

类比解释：
想象将不同颜色的乐高积木堆叠成一座塔，每个积木代表一个数据系列，塔的高度则代表总和。这就是堆叠条形图的直观表现形式。

与普通条形图的区别

普通条形图将不同系列的条形并列显示，适合对比独立数据；而堆叠条形图通过叠加展示，更适用于分析数据的构成和整体趋势。例如：

普通条形图：适合比较不同产品在同期的销量。
堆叠条形图：适合分析同一产品在不同地区的销量占比，并观察总销量的变化。

配置 Highcharts 堆叠条形图的步骤

第一步：引入 Highcharts 库

在 HTML 文件中通过 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/export-data.js"></script>

第二步：初始化图表容器

在 HTML 中添加一个用于渲染图表的 div 容器：

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

第三步：配置图表选项

1. 设置堆叠类型

在 plotOptions 中启用 stacking 属性，可选值为 normal（默认）或 percent（百分比堆叠）：

plotOptions: {
    series: {
        stacking: 'normal' // 或 'percent'
    }
}

2. 配置坐标轴

设置 x 轴为分类类型，y 轴为数值类型：

xAxis: {
    categories: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
    min: 0,
    title: {
        text: '销售额（万元）'
    }
}

3. 添加数据系列

每个数据系列代表一个堆叠层，需指定 name 和 data：

series: [{
    name: '线上渠道',
    data: [120, 150, 180, 200]
}, {
    name: '线下渠道',
    data: [80, 100, 120, 140]
}, {
    name: '海外渠道',
    data: [30, 40, 50, 60]
}]

完整示例代码

Highcharts.chart('container', {
    chart: {
        type: 'bar' // 设置为条形图
    },
    title: {
        text: '2023年各季度销售额分布'
    },
    xAxis: {
        categories: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
        min: 0,
        title: {
            text: '销售额（万元）'
        }
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: '线上渠道',
        data: [120, 150, 180, 200]
    }, {
        name: '线下渠道',
        data: [80, 100, 120, 140]
    }, {
        name: '海外渠道',
        data: [30, 40, 50, 60]
    }]
});

实战案例：分析用户行为数据

案例背景

假设我们需展示某网站用户在不同时间段的活跃度，分为“浏览”“下单”“支付”三个阶段。目标是观察各阶段的用户数量变化及其总和。

步骤分解

1. 准备数据

const categories = ['上午', '下午', '晚上', '深夜'];
const browsing = [200, 300, 450, 150];
const ordering = [50, 80, 120, 30];
const payment = [30, 60, 90, 15];

2. 配置图表

Highcharts.chart('container', {
    chart: {
        type: 'bar',
        height: 600
    },
    title: {
        text: '用户活跃阶段分布'
    },
    xAxis: {
        categories: categories
    },
    yAxis: {
        min: 0,
        title: {
            text: '用户数量'
        }
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: '浏览',
        data: browsing,
        color: '#2b908f'
    }, {
        name: '下单',
        data: ordering,
        color: '#90ee7e'
    }, {
        name: '支付',
        data: payment,
        color: '#f45b5b'
    }]
});

3. 效果展示

每个时间段的条形由三部分堆叠，总高度代表总用户数。
不同颜色区分阶段，通过图例可快速关联数据。

高级技巧与优化

1. 动态数据更新

通过 Highcharts.series.update() 实现数据实时刷新：

// 每 2 秒更新一次“支付”系列的数据
setInterval(() => {
    const paymentSeries = chart.series[2];
    const newData = paymentSeries.data.map(point => point.y + Math.random() * 10);
    paymentSeries.update({
        data: newData
    });
}, 2000);

2. 响应式设计

使用 responsive 属性适配不同屏幕尺寸：

responsive: {
    rules: [{
        condition: {
            maxWidth: 600
        },
        chartOptions: {
            yAxis: {
                title: {
                    text: ''
                }
            },
            legend: {
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

3. 自定义标签与提示框

通过 dataLabels 和 tooltip 配置更清晰的交互：

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            format: '{point.y}' // 显示具体数值
        }
    }
},
tooltip: {
    shared: true,
    formatter: function() {
        return `${this.x}时段：<br/>浏览：${this.points[0].y}<br/>下单：${this.points[1].y}<br/>支付：${this.points[2].y}`;
    }
}

常见问题与解决方案

问题 1：堆叠效果未生效

原因：未在 plotOptions 中设置 stacking 属性。
解决：检查配置代码，确保：

plotOptions: {
    series: {
        stacking: 'normal' // 或 'percent'
    }
}

问题 2：图表尺寸异常

原因：容器 div 的样式未指定宽度和高度。
解决：

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

问题 3：数据标签重叠

原因：数据值过小或堆叠层数过多导致标签拥挤。
解决：

减少 yAxis.min 的值以扩展垂直空间；
使用 dataLabels.overflow: 'allow' 或调整字体大小。

结论

Highcharts 堆叠条形图凭借其直观性与灵活性，已成为数据可视化领域的常用工具。通过本文的分步讲解，读者不仅掌握了基础配置方法，还学习了动态交互、响应式设计等高级技巧。无论是分析销售趋势、资源分配，还是用户行为，堆叠条形图都能帮助开发者快速提炼数据价值。

下一步，读者可以尝试将案例扩展为百分比堆叠图（stacking: 'percent'），或结合 Highcharts 的其他图表类型（如折线图、饼图）构建复合图表。通过实践与探索，您将更熟练地运用 Highcharts 实现专业的数据可视化方案。