异常教程
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 百分比堆叠区域图是一个理想的选择。它通过将不同数据系列堆叠为 100% 的区域，帮助用户直观理解各部分在整体中的占比变化。本文将从零开始，逐步解析这一图表的核心原理、配置方法和实战技巧。
基础概念：理解堆叠区域图的底层逻辑
1. 区域图与堆叠区域图的区别
区域图（Area Chart）通过填充的区域展示数据趋势，而堆叠区域图（Stacked Area Chart）则将多个数据系列“堆叠”在一起，形成总和的可视化。例如，假设我们有三个产品（A、B、C）的月销售额数据，堆叠区域图会将它们的销售额垂直叠加，最终显示总销售额的区域面积。
2. 百分比堆叠区域图的核心价值
百分比堆叠区域图在堆叠的基础上进一步标准化处理，将每个时间点的总值设为 100%。这样，即使总值波动，也能清晰看到各部分的占比变化。这类似于将不同颜色的沙漏堆叠在一起，每个颜色代表一个系列，而总高度始终为 100%。
配置步骤：从零构建图表
1. 引入 Highcharts 依赖
在 HTML 文件中引入 Highcharts 的核心库和相关模块：
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
2. 创建基础 HTML 结构
定义一个容器元素用于渲染图表：
<div id="container" style="width: 100%; height: 400px;"></div>
3. 配置图表选项
(1) 数据准备
假设我们有以下销售数据（单位：万元）：
const data = [
{ name: '产品A', data: [15, 25, 30, 40, 35] },
{ name: '产品B', data: [20, 18, 22, 28, 30] },
{ name: '产品C', data: [10, 12, 15, 20, 25] }
];
(2) 核心配置项
Highcharts.chart('container', {
title: { text: '产品销售额占比变化' },
xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] },
yAxis: {
title: { text: '百分比 (%)' },
stackLabels: {
enabled: true,
format: '{stack}%'
}
},
plotOptions: {
area: {
stacking: 'percent', // 关键配置：启用百分比堆叠
lineColor: '#666',
lineWidth: 1
}
},
series: data
});
3. 关键配置项详解
- stacking: 'percent'：强制图表以百分比形式堆叠，总和始终为 100%。
- yAxis.stackLabels：在 y 轴显示堆叠总和，增强数据可读性。
- plotOptions.area：定义区域图的边框颜色和宽度，确保堆叠区域边界清晰。
进阶技巧：优化图表表现力
1. 自定义颜色与透明度
通过 colors 属性设置系列颜色，或为每个系列单独配置 color 和 fillOpacity：
Highcharts.setOptions({
colors: ['#2b908f', '#90ee7e', '#f45b5b']
});
// 或在 series 中单独配置
{
name: '产品A',
color: '#2b908f',
fillOpacity: 0.7
}
2. 添加图例交互
默认的图例（legend）支持点击隐藏/显示系列。可进一步配置图例位置和样式：
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
}
3. 响应式设计
通过 responsive 配置项适配不同屏幕尺寸：
responsive: {
rules: [{
condition: {
maxWidth: 600
},
chartOptions: {
yAxis: {
labels: {
format: '{value}%'
}
}
}
}]
}
实战案例：电商季度销售分析
1. 数据场景
某电商平台分析 2023 年 Q1 至 Q4 的销售额占比，数据如下：
const categories = ['Q1', 'Q2', 'Q3', 'Q4'];
const series = [
{ name: '电子产品', data: [30, 35, 40, 45] },
{ name: '服饰鞋包', data: [20, 22, 18, 20] },
{ name: '食品饮料', data: [15, 18, 20, 17] }
];
2. 完整代码实现
Highcharts.chart('container', {
chart: { type: 'area' },
title: { text: '2023年电商品类销售占比分析' },
xAxis: { categories: categories },
yAxis: {
title: { text: '市场份额 (%)' },
min: 0,
max: 100,
stackLabels: {
enabled: true,
format: '{stack}%'
}
},
plotOptions: {
area: {
stacking: 'percent',
marker: {
radius: 2,
states: { hover: { enabled: true } }
}
}
},
series: series,
tooltip: {
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b> ({point.stack}%)<br/>'
}
});
3. 效果解析
- 堆叠总和：每个季度的总占比为 100%，即使实际销售额增长，也能清晰看到品类间的占比变化。
- 工具提示（Tooltip）：显示具体数值及当前点的堆叠百分比，便于对比分析。
- 数据标记：通过
marker配置突出关键数据点，提升交互体验。
常见问题与解决方案
1. 图表显示为零或异常堆叠
原因：未正确设置 stacking: 'percent'，或数据格式不规范。
解决：检查 series 是否包含 data 数组，且每个系列的 data 长度与 xAxis.categories 一致。
2. 百分比计算不准确
原因：Highcharts 默认保留小数，可能导致视觉误差。
解决：通过 yAxis.labels.format 或 tooltip.pointFormat 指定保留小数位数：
yAxis: {
labels: {
format: '{value:.1f}%'
}
}
3. 图表在移动端显示模糊
原因：未设置响应式配置或 exporting 模块未加载。
解决：添加 responsive 规则，并引入 exporting.js 模块优化导出功能：
<script src="https://code.highcharts.com/modules/exporting.js"></script>
结论：掌握百分比堆叠区域图的核心价值
通过本文的讲解，我们系统掌握了 Highcharts 百分比堆叠区域图 的配置方法、进阶技巧和实战案例。这种图表类型尤其适用于需要对比多个数据系列占比变化的场景，例如市场占有率分析、资源分配监控等。建议读者通过以下步骤深化理解：
- 实践配置：尝试修改案例中的数据和样式参数，观察图表变化。
- 探索 API：查阅 Highcharts 官方文档 ，学习
boost、drilldown等高级功能。 - 结合业务需求：根据实际项目数据，设计针对性的可视化方案。
记住，优秀的数据可视化不仅是技术实现，更是对业务逻辑的深刻理解。掌握这一工具后，你将能更高效地将复杂数据转化为直观、易懂的决策依据。