企业官网建设流程全解析

Highcharts 区域图（Area Chart）详解

Highcharts 中的区域图用于展示数据随时间（或类别）的累积变化趋势，数据点之间的区域会被填充颜色，非常适合表现总量、占比或趋势强度。常见变体有：

• area：基本区域图（系列不叠加）
• areaspline：平滑曲线区域图（推荐，视觉更柔和）
• arearange：区域范围图（显示高低值区间，如温度范围）
• stacked area：堆叠区域图（多个系列垂直叠加，显示总量贡献）

1. 基本区域图示例（areaspline）

以下是一个完整的平滑区域图示例（多系列、非堆叠）：

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>Highcharts 区域图示例</title><scriptsrc="https://code.highcharts.com/highcharts.js"></script></head><body><divid="container"style="width:900px;height:500px;margin:50px auto;"></div><script>Highcharts.chart('container',{chart:{type:'areaspline',// 关键：平滑区域图backgroundColor:'#f8f9fa'},title:{text:'2020-2024 年三大浏览器市场份额变化',style:{fontWeight:'bold'}},subtitle:{text:'数据来源：StatCounter'},xAxis:{categories:['2020','2021','2022','2023','2024'],tickmarkPlacement:'on'},yAxis:{title:{text:'市场份额 (%)'},labels:{format:'{value}%'},max:100},tooltip:{shared:true,// 共享提示框，显示所有系列值valueSuffix:'%',valueDecimals:1},plotOptions:{areaspline:{fillOpacity:0.6,// 区域填充透明度（0-1，越小越透明）lineWidth:2,marker:{enabled:true,radius:5,states:{hover:{radius:8}}}}},series:[{name:'Chrome',data:[65.8,66.5,65.9,65.2,64.8],color:'#FF6B6B'},{name:'Safari',data:[18.5,18.9,19.2,19.5,19.8],color:'#4ECDC4'},{name:'Edge',data:[5.2,4.8,4.9,5.1,5.3],color:'#45B7D1'}]});</script></body></html>

2. 堆叠区域图（Stacked Area）——显示总量

堆叠区域图非常适合展示“部分之和 = 总量”的场景。

只需添加plotOptions中的stacking配置：

plotOptions:{areaspline:{stacking:'normal',// 'normal' 普通堆叠，'percent' 百分比堆叠fillOpacity:0.7,lineWidth:2}},series:[{name:'产品A',data:[10,15,20,25,30]},{name:'产品B',data:[20,18,15,20,25]},{name:'产品C',data:[30,25,30,25,20]}]

• stacking: 'normal'→ 绝对值堆叠（Y 轴显示总量）
• stacking: 'percent'→ 百分比堆叠（Y 轴始终 0-100%）

3. 区域范围图（Arearange）——显示波动范围

适合展示温度、股价波动等带上下限的数据。

需引入highcharts-more.js：

<scriptsrc="https://code.highcharts.com/highcharts-more.js"></script>

配置示例：

chart:{type:'arearange'},series:[{name:'温度范围',data:[// [low, high] 格式，x 可为时间戳或索引[-5.2,2.1],[0.5,8.3],[5.1,15.2],// 对应月份// ...],color:'#7cb5ec',fillOpacity:0.3}]

4. 常用配置总结

5. 快速切换类型

• type: 'area'→ 直角区域图
• type: 'areaspline'→ 平滑区域图（最常用）
• 加stacking: 'normal'→ 堆叠区域图
• 加stacking: 'percent'→ 百分比堆叠区域图

如果你需要：

• 堆叠 + 百分比显示
• 带负值的区域图
• 与折线图混合
• 动态数据更新

告诉我具体场景，我可以提供完整代码示例！