Imdroid/weather-station
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化前端页面

Browse Source
This commit is contained in:
yarnom 2025-08-29 23:14:25 +08:00
parent 3799b9fac8
commit 7e24cc52c9
1 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
static/js/weather-chart.js
View File

@ -87,7 +87,8 @@ const WeatherChart = {
backgroundColor: 'rgba(255, 99, 132, 0.1)',
yAxisID: 'y-temperature',
tension: 0.4,
spanGaps: false
spanGaps: false,
legendGroup: 'history'
},
{
label: '湿度 (%) - 实测',
@ -97,7 +98,8 @@ const WeatherChart = {
yAxisID: 'y-humidity',
tension: 0.4,
hidden: true,
spanGaps: false
spanGaps: false,
legendGroup: 'history'
},
{
label: '雨量 (mm) - 实测',
@ -105,7 +107,8 @@ const WeatherChart = {
type: 'bar',
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgb(54, 162, 235)',
yAxisID: 'y-rainfall'
yAxisID: 'y-rainfall',
legendGroup: 'history'
},
{
label: '累计雨量 (mm) - 实测',
@ -116,16 +119,17 @@ const WeatherChart = {
tension: 0.2,
spanGaps: false,
pointRadius: 0,
hidden: true
hidden: true,
legendGroup: 'history'
}
];
if (forecastData.length > 0) {
// 雨量 仅显示 -1h/-2h/-3h
datasets.push(
{ label: '雨量 (mm) - 预报 (+1h)', data: forecastRainfallsH1, type: 'bar', backgroundColor: 'rgba(255, 99, 71, 0.55)', borderColor: 'rgb(255, 99, 71)', yAxisID: 'y-rainfall' },
{ label: '雨量 (mm) - 预报 (+2h)', data: forecastRainfallsH2, type: 'bar', backgroundColor: 'rgba(255, 205, 86, 0.55)', borderColor: 'rgb(255, 205, 86)', yAxisID: 'y-rainfall' },
{ label: '雨量 (mm) - 预报 (+3h)', data: forecastRainfallsH3, type: 'bar', backgroundColor: 'rgba(76, 175, 80, 0.55)', borderColor: 'rgb(76, 175, 80)', yAxisID: 'y-rainfall' }
{ label: '雨量 (mm) - 预报 (+1h)', data: forecastRainfallsH1, type: 'bar', backgroundColor: 'rgba(255, 99, 71, 0.55)', borderColor: 'rgb(255, 99, 71)', yAxisID: 'y-rainfall', legendGroup: 'forecast' },
{ label: '雨量 (mm) - 预报 (+2h)', data: forecastRainfallsH2, type: 'bar', backgroundColor: 'rgba(255, 205, 86, 0.55)', borderColor: 'rgb(255, 205, 86)', yAxisID: 'y-rainfall', legendGroup: 'forecast' },
{ label: '雨量 (mm) - 预报 (+3h)', data: forecastRainfallsH3, type: 'bar', backgroundColor: 'rgba(76, 175, 80, 0.55)', borderColor: 'rgb(76, 175, 80)', yAxisID: 'y-rainfall', legendGroup: 'forecast' }
);
// 温度 取最接近的预报（0h>1h>2h>3h）
@ -137,7 +141,8 @@ const WeatherChart = {
borderDash: [5, 5],
yAxisID: 'y-temperature',
tension: 0.4,
spanGaps: false
spanGaps: false,
legendGroup: 'forecast'
});
}
@ -153,6 +158,20 @@ const WeatherChart = {
responsive: true,
maintainAspectRatio: false,
interaction: { mode: 'index', intersect: false },
plugins: {
legend: {
position: 'top',
align: 'center',
labels: {
boxWidth: 30,
padding: 15,
font: {
size: 11
}
},
maxHeight: 80
}
},
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 },