创建预测图表｜代码生成一天内气温的连续波动趋势渐变线
图表上的数据点连接成一条线，说明了一天中温度的波动。通过这种图形表示，可以轻松快速地了解预计气温每小时的变化情况，并突出显示当天的天气预报中的高峰和低谷。
完整代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>冰岛气温小时预报</title> <style> #container { width: 100%; height: 500px; } </style> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container"></div> <script> (async () => { // 从气象API获取未来几小时的天气预报数据 const json = await fetch( 'https://api.met.no/weatherapi/locationforecast/2.0/compact?lat=64.128288&lon=-21.827774' ).then(response => response.json()); // 提取前10条数据：时间 + 气温 const data = json.properties.timeseries.slice(0, 10).map(el => [ new Date(el.time).getTime(), // X轴：时间戳 el.data.instant.details.air_temperature // Y轴：气温 ]); // 获取当前时间，用于绘制分隔线 const todayDate = new Date(); const today = todayDate.getTime() - todayDate.getTimezoneOffset() * 60 * 1000; // 绘制气温曲线图 Highcharts.chart('container', { // 主标题 title: { text: '冰岛雷克雅未克气温小时预报' }, // 副标题 subtitle: { text: '虚线表示未来预报温度' }, // X轴：时间轴 xAxis: { type: 'datetime', // 当前时间分隔线 plotLines: [{ color: '#4840d6', width: 2, value: today, zIndex: 2, dashStyle: 'Dash', label: { text: '当前时间', rotation: 0, y: 20, style: { color: '#333' } } }] }, // Y轴：温度 yAxis: { title: { text: '温度 (°C)' } }, // 不显示图例 legend: { enabled: false }, // 悬浮提示后缀 tooltip: { valueSuffix: '°C' }, // 数据系列 series: [{ name: '温度', data: data, zoneAxis: 'x', // 按X轴分区 lineWidth: 4, // 线条粗细 // 数据点样式 marker: { lineWidth: 2, lineColor: '#4840d6', fillColor: '#fff' }, // 渐变色线条 color: { linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, '#fa4fed'], [1, '#5897ff'] ] }, // 分区：当前时间之前实线，之后虚线 zones: [ { value: today }, // 现在之前：实线 { dashStyle: 'Dot' } // 未来：点线 ] }] }); })(); </script> </body> </html>线条含义数据点连成平滑曲线，直观展示一天内气温的连续波动趋势。
展示方式
- 实线= 已发生 / 当前的温度
- 虚线= 未来的预报温度
- 紫色竖线= 当前时间分界线
图表作用
- 快速看清每小时气温变化
- 一眼识别当天温度高峰（最高点）
- 一眼识别当天温度低谷（最低点）
- 清晰区分已观测温度和预报温度
核心功能用可视化曲线替代纯文字预报，让天气趋势一目了然。