本案例基于 Highcharts areaspline 平滑面积曲线，搭配倒置坐标轴 + 百分比堆叠，实现随海拔高度变化的大气组分体积占比分布图，还原 MSIS 大气模型不同高度氮气、氧气、氧原子、氩气、氦气、氢气的浓度分层规律，案例适合作为科研、教学或企业可视化项目的基础模板，非常适合地理、航天、环境气象类可视化场景。
在科学研究、工业仿真、环境监测、医疗分析等领域，经常需要展示多个组成部分随某一连续变量变化而动态变化的数据。例如：
- 地球大气组成随高度变化
- 岩层成分随深度变化
- 药物浓度随时间变化
- 市场份额随年份变化
- 能源结构随政策调整变化
传统折线图只能看到单个系列变化，而无法直观体现整体组成比例。
Highcharts 提供的 Areaspline + Percent Stacking（百分比堆积面积样条图） 正是解决此类问题的最佳方案之一。
本文将结合官方示例，对该图表进行全面解析。
演示代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>不同高度大气成分变化图</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
#container {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'areaspline',
inverted: true,
plotBorderRadius: 8,
plotBorderWidth: 1
},
// 自定义分层配色，由深到浅区分近地面/高空气体
colors: [
'#334499',
'#279955',
'#e67e22',
'#9b59b6'
],
title: {
text: '不同高度大气成分变化',
style: { fontSize: '16px' }
},
xAxis: {
title: {
text: '高度（km）'
},
// 对应data数组6个采样高度
categories: ['0', '100', '200', '300', '400', '500']
},
yAxis: {
title: {
text: '体积分数'
},
labels: {
format: '{value} %'
},
reversedStacks: false // 系列从上到下按数组顺序堆叠
},
tooltip: {
shared: true, // 悬浮同时显示该高度全部气体占比
pointFormat: '{series.name}：{point.y}%',
headerFormat: '海拔 {point.x} km <br/>'
},
plotOptions: {
areaspline: {
stacking: 'percent',
lineWidth: 1,
marker: {
enabled: false // 隐藏散点，保证分层平滑干净
}
}
},
series: [
{
name: '氮气',
data: [78,76,38,10,2.5,0]
},
{
name: '氧气',
data: [21,20,2,0.5,0,0]
},
{
name: '原子氧',
data: [0,3,59,84,70,32]
},
{
name: '氩气',
data: [1,1,0,0,0,0]
}
]
});
</script>
</body>
</html>
核心视觉特征：纵向代表海拔高度（千米），横向为气体体积百分比，色块平滑堆叠展示各气体随高度的消长、更替过程，直观呈现对流层、平流层、热层、外层大气成分切换特征。
核心特性
总结
Areaspline 百分比堆积图是 Highcharts 在科学计算与企业数据可视化中的经典图表之一。它能够以平滑、直观的方式展示多个组成部分随连续变量变化的趋势，同时兼顾动画效果、交互体验与渲染性能。
- 高度自定义视觉美化 支持单独配置分层线条粗细、填充透明度、圆角绘图边框、自定义色系，适配科普报告、大屏可视化、教学课件多风格需求。
- 框架兼容性强 原生 JS 实现，可无缝嵌入 Vue/React/Angular，适配气象监测平台、航天仿真系统、地理科普网站。
无论是科研机构的大气成分分析、制造业的材料配比监控，还是企业经营中的市场份额演化，这一图表都能够帮助用户快速理解数据结构及其变化规律。
如果结合 Highcharts Boost、DataTable、Dashboards 等能力，还可以进一步扩展为支持百万级数据、实时刷新和多图联动的企业级可视化解决方案，成为数字化运营和智能决策的重要组成部分。
拓展应用场景
1. 气象 / 环境领域
- 不同海拔大气气体、臭氧、污染物浓度分层变化；
- 水体不同深度溶解氧、重金属、微生物占比垂直分布。
2. 地质勘探领域
- 地下不同地层矿物、岩层成分占比；
- 钻井深度油气、水资源含量分层可视化。
3. 航空航天领域
- 热层 / 电离层气体组分随高度变化；
- 轨道高度大气阻力、粒子成分对比分析。
4. 教学科普场景
地理、化学课堂动态分层演示图，替代静态图片，支持鼠标交互查看数据。
5. 工业化工场景
反应釜不同高度物料组分、分层液体浓度垂直分布监测。
