创建6月份北京市高低温区间图表｜Highcharts 面积折线图示列讲解
案例图表结合区间面积图与折线展示2026年6月北京逐日气温：半透明色块代表当日最低、最高气温波动区间，折线标记每日平均气温；色块宽度越大，代表当日昼夜温差越大。本月无35℃以上高温天气，整体气温较常年同期偏低。
数据说明
依据北京市气象局公开信息：2026 年 6 月北京整月无高温（最高均低于 35℃），全月平均气温 24℃，夜间最低多在 18–22℃，阴雨天气昼夜温差缩小，晴天温差拉大；整理 30 日逐日最低温、最高温、平均气温，贴合真实气候特征。
完整HTLM代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2026年6月北京气温变化图</title> <!-- 全套依赖 --> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <style> .highcharts-figure { min-width: 320px; max-width: 960px; margin: 20px auto; } #container { height: 560px; } .highcharts-description { color: #444; margin: 8px 10px; font-size: 14px; } </style> </head> <body> <figure class="highcharts-figure"> <div id="container"></div> <p class="highcharts-description"> 图表结合区间面积图与折线展示2026年6月北京逐日气温：半透明色块代表当日最低、最高气温波动区间，折线标记每日平均气温；色块宽度越大，代表当日昼夜温差越大。本月无35℃以上高温天气，整体气温较常年同期偏低。 </p> </figure> <script> function createChart(ranges, averages) { Highcharts.chart('container', { title: { text: '2026年6月北京气温变化走势', align: 'left' }, subtitle: { text: '数据来源：北京市气象观测站', align: 'left' }, xAxis: { type: 'datetime', title: { text: '日期' }, accessibility: { rangeDescription: '时间范围：2026年6月1日 至 2026年6月30日' } }, yAxis: { title: { text: '气温（℃）' } }, tooltip: { crosshairs: true, shared: true, valueSuffix: ' ℃' }, plotOptions: { series: { pointStart: '2026-06-01', pointIntervalUnit: 'day' } }, series: [{ name: '平均气温', data: averages, zIndex: 1, marker: { fillColor: 'var(--highcharts-background-color)', lineWidth: 2, lineColor: null } }, { name: '气温波动区间（最低~最高）', data: ranges, type: 'arearange', lineWidth: 0, linkedTo: ':previous', color: '#4285F4', fillOpacity: 0.3, zIndex: 0, marker: { enabled: false } }] }); } // ranges 每组：[当日最低气温，当日最高气温] const ranges = [ [20,34.8],[21,33],[20,31],[19,29],[18,28], [17,27],[19,31],[18,30],[19,30],[20,32], [18,32.6],[19,32.6],[20,32],[19,32],[20,32.9], [21,33],[20,31],[21,30],[22,29],[21,28], [20,29],[21,29.5],[22,29.3],[21,28],[20,27], [19,28],[20,29],[21,29.2],[22,28.5],[21,29.3] ]; // averages 每组：[当日平均气温] const averages = [ [27.4],[27],[25.5],[24],[23], [22],[25],[24],[24.5],[26], [25.3],[25.8],[26],[25.5],[26.4], [27],[25.5],[25.5],[25.5],[24.5], [24.5],[25.2],[25.6],[24.5],[23.5], [23.5],[24.5],[25.1],[25.2],[25.2] ]; createChart(ranges, averages); </script> </body> </html>图表讲解
- 底层区间面积（arearange）半透明色块填充每日最低、最高气温，色块宽度代表昼夜温差；数据格式固定
[最低值, 最高值]。 - 上层折线白色描边圆点标记每日平均温度，层级更高不会被色块遮挡；
linkedTo: ':previous'将区间与平均气温绑定为一组，共用图例，鼠标悬浮同时展示最低 / 平均 / 最高三组温度；- 时间轴统一配置
pointStart统一起始日期、pointIntervalUnit: 'day'按天递增，无需每条数据携带时间戳。
Highcharts 实现该图表的核心优势
- 原生 arearange 专用系列无需手动绘制两条边界折线 + 自定义填充，仅传入
[最小值,最大值]数组即可生成波动区间，大幅减少开发工作量。 - linkedTo 系列联动 均值、区间两组数据绑定为一体，单图例控制显隐，悬浮弹窗合并展示，界面干净整洁。
- 统一时序配置 全局配置起始日期与日间隔，后端无需携带每条数据的时间戳，轻量化数据传输。
- 图层自由分层 zIndex 控制色块、折线上下层级，不会出现线条被填充遮挡的视觉缺陷。
- 完整配套能力 内置十字准线、单位后缀、导出图片 / CSV、无障碍读屏，开箱即用，适配监控大屏、气象系统、数据分析报表。
- 框架兼容性强 原生 JS 实现，可无缝嵌入 Vue/React/Angular 后台项目。
通用拓展场景
- 气象环保：温湿度、污染物每日高低浓度区间；
- 工业 IoT：设备压力、温度预警上下限 + 实时均值；
- 金融分析：每日股价最高最低价区间 + 收盘价趋势；
- 科研统计：样本均值 ± 标准差置信区间；
- 医疗监测：生理指标正常范围与实时检测曲线对比。