diff --git a/static/js/weather-chart.js b/static/js/weather-chart.js index 8cc74ea..541c225 100644 --- a/static/js/weather-chart.js +++ b/static/js/weather-chart.js @@ -28,6 +28,14 @@ const WeatherChart = { const item = historyData.find(d => d.date_time === label); return item ? item.humidity : null; }); + const historyPressures = allLabels.map(label => { + const item = historyData.find(d => d.date_time === label); + return item ? item.pressure : null; + }); + const historyWindSpeeds = allLabels.map(label => { + const item = historyData.find(d => d.date_time === label); + return item ? item.wind_speed : null; + }); const historyRainfalls = allLabels.map(label => { const item = historyData.find(d => d.date_time === label); return item ? item.rainfall : null; @@ -63,17 +71,21 @@ const WeatherChart = { const forecastRainfallsH1 = allLabels.map(label => getRainAtLead(label, 1)); const forecastRainfallsH2 = allLabels.map(label => getRainAtLead(label, 2)); const forecastRainfallsH3 = allLabels.map(label => getRainAtLead(label, 3)); - const pickNearestTemp = (label) => { + + const pickNearest = (label, field) => { // 近似优先级:0h > 1h > 2h > 3h const b = byTime.get(label); if (!b) return null; - if (b[0] && b[0].temperature != null) return b[0].temperature; - if (b[1] && b[1].temperature != null) return b[1].temperature; - if (b[2] && b[2].temperature != null) return b[2].temperature; - if (b[3] && b[3].temperature != null) return b[3].temperature; + if (b[0] && b[0][field] != null) return b[0][field]; + if (b[1] && b[1][field] != null) return b[1][field]; + if (b[2] && b[2][field] != null) return b[2][field]; + if (b[3] && b[3][field] != null) return b[3][field]; return null; }; - const forecastTemperaturesNearest = allLabels.map(label => pickNearestTemp(label)); + const forecastTemperaturesNearest = allLabels.map(label => pickNearest(label, 'temperature')); + const forecastHumiditiesNearest = allLabels.map(label => pickNearest(label, 'humidity')); + const forecastPressuresNearest = allLabels.map(label => pickNearest(label, 'pressure')); + const forecastWindSpeedsNearest = allLabels.map(label => pickNearest(label, 'wind_speed')); // 销毁旧图表 if (this.chart) this.chart.destroy(); @@ -99,6 +111,26 @@ const WeatherChart = { hidden: true, spanGaps: false }, + { + label: '大气压 (hPa) - 实测', + data: historyPressures, + borderColor: 'rgb(153, 102, 255)', + backgroundColor: 'rgba(153, 102, 255, 0.1)', + yAxisID: 'y-pressure', + tension: 0.4, + hidden: true, + spanGaps: false + }, + { + label: '风速 (m/s) - 实测', + data: historyWindSpeeds, + borderColor: 'rgb(75, 192, 192)', + backgroundColor: 'rgba(75, 192, 192, 0.1)', + yAxisID: 'y-wind', + tension: 0.4, + hidden: true, + spanGaps: false + }, { label: '雨量 (mm) - 实测', data: historyRainfalls, @@ -128,17 +160,52 @@ const WeatherChart = { { label: '雨量 (mm) - 预报 (+3h)', data: forecastRainfallsH3, type: 'bar', backgroundColor: 'rgba(76, 175, 80, 0.55)', borderColor: 'rgb(76, 175, 80)', yAxisID: 'y-rainfall' } ); - // 温度 取最接近的预报(0h>1h>2h>3h) - datasets.push({ - label: '温度 (°C) - 预报', - data: forecastTemperaturesNearest, - borderColor: 'rgb(255, 159, 64)', - backgroundColor: 'rgba(255, 159, 64, 0.1)', - borderDash: [5, 5], - yAxisID: 'y-temperature', - tension: 0.4, - spanGaps: false - }); + // 其他预报数据(取最接近的预报:0h>1h>2h>3h) + datasets.push( + { + label: '温度 (°C) - 预报', + data: forecastTemperaturesNearest, + borderColor: 'rgb(255, 159, 64)', + backgroundColor: 'rgba(255, 159, 64, 0.1)', + borderDash: [5, 5], + yAxisID: 'y-temperature', + tension: 0.4, + spanGaps: false + }, + { + label: '湿度 (%) - 预报', + data: forecastHumiditiesNearest, + borderColor: 'rgb(54, 162, 235)', + backgroundColor: 'rgba(54, 162, 235, 0.1)', + borderDash: [5, 5], + yAxisID: 'y-humidity', + tension: 0.4, + hidden: true, + spanGaps: false + }, + { + label: '大气压 (hPa) - 预报', + data: forecastPressuresNearest, + borderColor: 'rgb(153, 102, 255)', + backgroundColor: 'rgba(153, 102, 255, 0.1)', + borderDash: [5, 5], + yAxisID: 'y-pressure', + tension: 0.4, + hidden: true, + spanGaps: false + }, + { + label: '风速 (m/s) - 预报', + data: forecastWindSpeedsNearest, + borderColor: 'rgb(75, 192, 192)', + backgroundColor: 'rgba(75, 192, 192, 0.1)', + borderDash: [5, 5], + yAxisID: 'y-wind', + tension: 0.4, + hidden: true, + spanGaps: false + } + ); } // 创建组合图表 @@ -165,9 +232,44 @@ const WeatherChart = { } }, scales: { - 'y-temperature': { type: 'linear', display: true, position: 'left', title: { display: true, text: '温度 (°C)' } }, - 'y-humidity': { type: 'linear', display: true, position: 'right', title: { display: true, text: '湿度 (%)' }, grid: { drawOnChartArea: false }, min: 0, max: 100 }, - 'y-rainfall': { type: 'linear', display: true, position: 'right', title: { display: true, text: '雨量 (mm)' }, grid: { drawOnChartArea: false }, beginAtZero: true } + 'y-temperature': { + type: 'linear', + display: true, + position: 'left', + title: { display: true, text: '温度 (°C)' } + }, + 'y-humidity': { + type: 'linear', + display: true, + position: 'right', + title: { display: true, text: '湿度 (%)' }, + grid: { drawOnChartArea: false }, + min: 0, + max: 100 + }, + 'y-pressure': { + type: 'linear', + display: true, + position: 'right', + title: { display: true, text: '大气压 (hPa)' }, + grid: { drawOnChartArea: false } + }, + 'y-wind': { + type: 'linear', + display: true, + position: 'right', + title: { display: true, text: '风速 (m/s)' }, + grid: { drawOnChartArea: false }, + beginAtZero: true + }, + 'y-rainfall': { + type: 'linear', + display: true, + position: 'right', + title: { display: true, text: '雨量 (mm)' }, + grid: { drawOnChartArea: false }, + beginAtZero: true + } } } });