案例图表结合区间面积图与折线展示2026年6月北京逐日气温半透明色块代表当日最低、最高气温波动区间折线标记每日平均气温色块宽度越大代表当日昼夜温差越大。本月无35℃以上高温天气整体气温较常年同期偏低。数据说明依据北京市气象局公开信息2026 年 6 月北京整月无高温最高均低于 35℃全月平均气温 24℃夜间最低多在 18–22℃阴雨天气昼夜温差缩小晴天温差拉大整理 30 日逐日最低温、最高温、平均气温贴合真实气候特征。完整HTLM代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title2026年6月北京气温变化图/title !-- 全套依赖 -- script srchttps://code.highcharts.com/highcharts.js/script script srchttps://code.highcharts.com/highcharts-more.js/script script srchttps://code.highcharts.com/modules/exporting.js/script script srchttps://code.highcharts.com/modules/export-data.js/script script srchttps://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 classhighcharts-figure div idcontainer/div p classhighcharts-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设备压力、温度预警上下限 实时均值金融分析每日股价最高最低价区间 收盘价趋势科研统计样本均值 ± 标准差置信区间医疗监测生理指标正常范围与实时检测曲线对比。