倒置百分比堆叠面积图表示列详解｜Highcharts大气成分图表代码

这是一个基于 Highcharts 实现的水平面积曲线图areaspline 倒置坐标系专门用于展示不同高度下地球大气成分的体积占比变化是典型的百分比堆叠面积图数据直观反映了大气层随高度升高的成分分布规律。我会从图表结构、核心配置、数据含义、视觉效果、专业用途五个维度完整解析让你完全理解这份代码和图表的作用。设计图表整体功能展示目标地球大气层不同高度0~2000km的主要气体成分N₂、O₂、O、Ar、He、H体积占比展示形式100% 堆叠水平面积曲线所有成分占比总和永远为 100%交互效果鼠标悬停显示对应高度的所有气体成分占比详情代码示列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 hrefhttps://en.wikipedia.org/wiki/Atmosphere_of_Earth target_blankWikipedia.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 tdspan stylecolor:{series.color};\u2b24/span/td td{series.name}/td td styletext-align: rightb{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: truestacking: percent是实现效果的核心交互体验共享提示框 十字线适合数据查看与演示配置分段详细解析1. 全局颜色配置javascriptHighcharts.setOptions({ colors: [#331E36,#41337A,#6EA4BF,#98CAD5,#C2EFEB,#ECFEE8,#ECFEE8] });定义图表专属配色方案6 种气体对应 6 种渐变色深紫→浅青视觉层次清晰最后一个颜色重复是备用配置不影响当前图表2. 图表基础类型javascriptchart: { type: areaspline, // 面积曲线图带平滑曲线 inverted: true // 【关键】倒置坐标系 → X轴变垂直Y轴变水平 }inverted: true是核心高度X 轴垂直显示占比Y 轴水平显示符合大气高度的阅读习惯areaspline平滑的面积填充曲线比普通折线更直观展示占比区间3. 标题与副标题javascripttitle: { text: MSIS atmospheric composition by height } // 主标题大气成分随高度变化 subtitle: { text: Source: Wikipedia.org } // 数据源对齐方式align: left左对齐符合网页阅读习惯4. 坐标轴配置最关键部分X 轴垂直轴 高度单位kmjavascriptxAxis: { title: { text: Height (km) }, tickInterval: 200, // 刻度间隔每200km一个刻度 crosshair: true // 鼠标悬停显示十字辅助线 }高度范围0 → 2000km对应 series 数据长度 11 个点间隔 100kmopposite: true刻度显示在右侧更符合阅读习惯Y 轴水平轴 体积占比javascriptyAxis: { title: { text: Volume fraction }, labels: { format: {value} % }, // 显示百分比 reversedStacks: false // 堆叠顺序不反转 }因为是百分比堆叠Y 轴范围固定为 0% ~ 100%5. 提示框鼠标悬停效果javascripttooltip: { shared: true, // 共享提示框显示当前高度所有气体数据 headerFormat: At {point.x} km:table, pointFormat: 显示气体名称颜色占比 }鼠标放在任意高度会一次性展示该高度所有 6 种气体的占比交互体验极佳6. 绘图样式美化配置javascriptplotOptions: { areaspline: { stacking: percent, // 【核心】百分比堆叠总和100% marker: false, // 隐藏数据点只保留平滑曲线 lineWidth: 1 // 曲线宽度1px简洁美观 } }stacking: percent强制所有系列数值堆叠为 100%完美展示成分比例关系关闭标记点、关闭悬停光晕让图表更简洁专业7. 数据系列核心数据6 种大气主要成分每个数组对应 0~1000km 每 100km 的体积占比javascriptseries: [ { 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] }// 氢原子 ]