这是一个基于 Highcharts 实现的水平面积曲线图（areaspline + 倒置坐标系） ，专门用于展示不同高度下地球大气成分的体积占比变化 ，是典型的百分比堆叠面积图，数据直观反映了大气层随高度升高的成分分布规律。
我会从图表结构、核心配置、数据含义、视觉效果、专业用途五个维度完整解析，让你完全理解这份代码和图表的作用。
设计图表整体功能
- 展示目标：地球大气层不同高度（0~2000km）的主要气体成分（N₂、O₂、O、Ar、He、H）体积占比
- 展示形式 ：100% 堆叠水平面积曲线，所有成分占比总和永远为 100%
- 交互效果：鼠标悬停显示对应高度的所有气体成分占比详情
代码示列：
javascript
Highcharts.setOptions({
colors: [
'#331E36',
'#41337A',
'#6EA4BF',
'#98CAD5',
'#C2EFEB',
'#ECFEE8',
'#ECFEE8'
]
});
Highcharts.chart('container', {
chart: {
type: 'areaspline',
inverted: true
},
title: {
text: 'MSIS atmospheric composition by height',
align: 'left'
},
subtitle: {
text: `Source:
<a href="https://en.wikipedia.org/wiki/Atmosphere_of_Earth"
target="_blank">Wikipedia.org</a>`,
align: 'left'
},
xAxis: {
tickmarkPlacement: 'on',
title: {
text: 'Height (km)'
},
opposite: 'true',
reversed: false,
crosshair: {
width: 2,
zIndex: 3
},
tickInterval: 200
},
yAxis: {
title: {
text: 'Volume fraction'
},
labels: {
format: '{value} %'
},
reversedStacks: false
},
tooltip: {
shared: true,
headerFormat: 'At {point.x} km:<table>',
pointFormat: `<tr>
<td><span style="color:{series.color};">\u2b24</span></td>
<td>{series.name}</td>
<td style="text-align: right"><b>{point.y} %</b></td>
</tr>`,
footerFormat: '</table>',
useHTML: true
},
plotOptions: {
series: {
marker: {
enabled: false
}
},
areaspline: {
stacking: 'percent',
lineColor: '#666666',
pointInterval: 100,
lineWidth: 1,
marker: {
enabled: false,
symbol: 'circle',
fillColor: '#666666',
lineColor: '#666666',
radius: 1,
states: {
hover: {
enabled: false
}
}
},
label: {
style: {
fontSize: '16px'
}
},
states: {
hover: {
halo: {
size: 0
}
}
}
}
},
series: [
{
name: 'N2',
data: [78, 76, 38, 10, 2.5, 0, 0, 0, 0, 0, 0]
},
{
name: 'O2',
data: [21, 20, 2, 0.5, 0, 0, 0, 0, 0, 0, 0]
},
{
name: 'O',
data: [0, 3, 59, 84, 70, 32, 8, 3, 1, 0, 0]
},
{
name: 'Ar',
data: [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
{
name: 'He',
data: [0, 0, 1, 5, 25, 62, 82, 82, 78, 71, 62]
},
{
name: 'H',
data: [0, 0, 0, 0.5, 2.5, 6, 10, 15, 21, 29, 38]
}
]
});- 配置亮点 ：
inverted: true+stacking: 'percent'是实现效果的核心 - 交互体验：共享提示框 + 十字线，适合数据查看与演示
配置分段详细解析
1. 全局颜色配置
javascript
javascript
Highcharts.setOptions({
colors: ['#331E36','#41337A','#6EA4BF','#98CAD5','#C2EFEB','#ECFEE8','#ECFEE8']
});- 定义图表专属配色方案，6 种气体对应 6 种渐变色（深紫→浅青），视觉层次清晰
- 最后一个颜色重复是备用配置，不影响当前图表
2. 图表基础类型
javascript
javascript
chart: {
type: 'areaspline', // 面积曲线图（带平滑曲线）
inverted: true // 【关键】倒置坐标系 → X轴变垂直，Y轴变水平
}inverted: true是核心：高度（X 轴）垂直显示，占比（Y 轴）水平显示，符合大气高度的阅读习惯areaspline：平滑的面积填充曲线，比普通折线更直观展示占比区间
3. 标题与副标题
javascript
javascript
title: { text: 'MSIS atmospheric composition by height' } // 主标题：大气成分随高度变化
subtitle: { text: 'Source: Wikipedia.org' } // 数据源- 对齐方式
align: 'left'：左对齐，符合网页阅读习惯
4. 坐标轴配置（最关键部分）
X 轴（垂直轴）= 高度（单位：km）
javascript
javascript
xAxis: {
title: { text: 'Height (km)' },
tickInterval: 200, // 刻度间隔：每200km一个刻度
crosshair: true // 鼠标悬停显示十字辅助线
}- 高度范围：0 → 2000km（对应 series 数据长度 11 个点，间隔 100km）
opposite: true：刻度显示在右侧，更符合阅读习惯
Y 轴（水平轴）= 体积占比
javascript
javascript
yAxis: {
title: { text: 'Volume fraction' },
labels: { format: '{value} %' }, // 显示百分比
reversedStacks: false // 堆叠顺序不反转
}- 因为是百分比堆叠，Y 轴范围固定为 0% ~ 100%
5. 提示框（鼠标悬停效果）
javascript
javascript
tooltip: {
shared: true, // 共享提示框：显示当前高度所有气体数据
headerFormat: 'At {point.x} km:<table>',
pointFormat: 显示气体名称+颜色+占比
}- 鼠标放在任意高度，会一次性展示该高度所有 6 种气体的占比，交互体验极佳
6. 绘图样式（美化配置）
javascript
javascript
plotOptions: {
areaspline: {
stacking: 'percent', // 【核心】百分比堆叠（总和100%）
marker: false, // 隐藏数据点，只保留平滑曲线
lineWidth: 1 // 曲线宽度1px，简洁美观
}
}stacking: 'percent'：强制所有系列数值堆叠为 100%，完美展示成分比例关系- 关闭标记点、关闭悬停光晕，让图表更简洁专业
7. 数据系列（核心数据）
6 种大气主要成分，每个数组对应 0~1000km 每 100km 的体积占比：
javascript
javascript
series: [
{ name: 'N2', data: [78,76,38,10,2.5,0,0,0,0,0,0] }, // 氮气
{ name: 'O2', data: [21,20,2,0.5,0,0,0,0,0,0,0] }, // 氧气
{ name: 'O', data: [0,3,59,84,70,32,8,3,1,0,0] }, // 氧原子
{ name: 'Ar', data: [1,1,0,0,0,0,0,0,0,0,0] }, // 氩气
{ name: 'He', data: [0,0,1,5,25,62,82,82,78,71,62] },// 氦气
{ name: 'H', data: [0,0,0,0.5,2.5,6,10,15,21,29,38] }// 氢原子
]