图表上的数据点连接成一条线说明了一天中温度的波动。通过这种图形表示可以轻松快速地了解预计气温每小时的变化情况并突出显示当天的天气预报中的高峰和低谷。完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title冰岛气温小时预报/title style #container { width: 100%; height: 500px; } /style script srchttps://code.highcharts.com/highcharts.js/script /head body div idcontainer/div script (async () { // 从气象API获取未来几小时的天气预报数据 const json await fetch( https://api.met.no/weatherapi/locationforecast/2.0/compact?lat64.128288lon-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线条含义数据点连成平滑曲线直观展示一天内气温的连续波动趋势。展示方式实线 已发生 / 当前的温度虚线 未来的预报温度紫色竖线 当前时间分界线图表作用快速看清每小时气温变化一眼识别当天温度高峰最高点一眼识别当天温度低谷最低点清晰区分已观测温度和预报温度核心功能用可视化曲线替代纯文字预报让天气趋势一目了然。
创建预测图表｜代码生成一天内气温的连续波动趋势渐变线
图表上的数据点连接成一条线说明了一天中温度的波动。通过这种图形表示可以轻松快速地了解预计气温每小时的变化情况并突出显示当天的天气预报中的高峰和低谷。完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title冰岛气温小时预报/title style #container { width: 100%; height: 500px; } /style script srchttps://code.highcharts.com/highcharts.js/script /head body div idcontainer/div script (async () { // 从气象API获取未来几小时的天气预报数据 const json await fetch( https://api.met.no/weatherapi/locationforecast/2.0/compact?lat64.128288lon-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线条含义数据点连成平滑曲线直观展示一天内气温的连续波动趋势。展示方式实线 已发生 / 当前的温度虚线 未来的预报温度紫色竖线 当前时间分界线图表作用快速看清每小时气温变化一眼识别当天温度高峰最高点一眼识别当天温度低谷最低点清晰区分已观测温度和预报温度核心功能用可视化曲线替代纯文字预报让天气趋势一目了然。
