修复温度曲线三个渲染问题:数据点过少、张力过高、canvas被CSS拉伸

- 小时数据插值为每半小时一点(24→47点)
- 全线 tension 从 0.28-0.32 降至 0.1-0.12
- 移除 canvas CSS width/height !important 声明,交由 Chart.js ResizeObserver 管理
This commit is contained in:
2569718930@qq.com
2026-05-16 21:30:47 +08:00
parent 2e02133696
commit 4a938395be
8 changed files with 27 additions and 23 deletions
@@ -47,7 +47,7 @@ export function DetailMiniTemperatureChart({ detail }: { detail: CityDetail }) {
label: forecastLabel,
pointRadius: 0,
spanGaps: true,
tension: 0.28,
tension: 0.1,
},
];
@@ -60,7 +60,7 @@ export function DetailMiniTemperatureChart({ detail }: { detail: CityDetail }) {
label: calibratedLabel,
pointRadius: 0,
spanGaps: true,
tension: 0.3,
tension: 0.1,
});
}
@@ -106,8 +106,7 @@
}
.root :global(.detail-mini-chart canvas) {
width: 100% !important;
height: 100% !important;
display: block;
}
.root :global(.detail-mini-chart-legend) {
@@ -785,8 +785,6 @@
}
.root :global(.intraday-scene-frame canvas) {
width: 100%;
height: 100%;
display: block;
}
@@ -48,7 +48,7 @@ export function DailyTemperatureChart({
label: locale === "en-US" ? "DEB baseline" : "DEB 原始路径",
parsing: false,
pointRadius: 0,
tension: 0.3,
tension: 0.1,
});
if (todayChartData.datasets.calibratedFutureSeries.length > 0) {
@@ -64,7 +64,7 @@ export function DailyTemperatureChart({
parsing: false,
pointHoverRadius: 5,
pointRadius: 0,
tension: 0.32,
tension: 0.12,
});
}
@@ -81,7 +81,7 @@ export function DailyTemperatureChart({
pointHoverRadius: 6,
pointRadius: 0,
spanGaps: true,
tension: 0.3,
tension: 0.1,
});
}
@@ -146,7 +146,7 @@ export function DailyTemperatureChart({
label: locale === "en-US" ? "OM Raw" : "OM 原始",
parsing: false,
pointRadius: 0,
tension: 0.3,
tension: 0.1,
});
}
if ((todayChartData.tafMarkers || []).length > 0) {
@@ -342,7 +342,7 @@ export function DailyTemperatureChart({
label:
locale === "en-US" ? "Open-Meteo Temperature" : "Open-Meteo 温度",
pointRadius: 2,
tension: 0.28,
tension: 0.1,
},
{
backgroundColor: "transparent",
@@ -352,7 +352,7 @@ export function DailyTemperatureChart({
fill: false,
label: locale === "en-US" ? "Dew Point" : "露点",
pointRadius: 0,
tension: 0.24,
tension: 0.1,
},
],
labels,
@@ -54,7 +54,7 @@ export function HistoryChart() {
pointBorderColor: "#fff",
pointHoverRadius: 7,
pointRadius: 5,
tension: 0.2,
tension: 0.1,
},
{
backgroundColor: "transparent",
@@ -65,7 +65,7 @@ export function HistoryChart() {
label: locale === "en-US" ? "DEB Fusion" : "DEB 融合",
pointHoverRadius: 6,
pointRadius: 4,
tension: 0.2,
tension: 0.1,
},
];
@@ -78,7 +78,7 @@ export function HistoryChart() {
label: locale === "en-US" ? "MGM Official Forecast" : "MGM 官方预报",
pointHoverRadius: 6,
pointRadius: 4,
tension: 0.2,
tension: 0.1,
});
}
@@ -95,7 +95,7 @@ export function HistoryChart() {
: `最佳单模型 (${summary.bestModelName})`,
pointHoverRadius: 6,
pointRadius: 4,
tension: 0.2,
tension: 0.1,
});
}
@@ -1061,8 +1061,6 @@
.root :global(.scan-ai-city-chart canvas) {
display: block;
width: 100% !important;
height: 100% !important;
}
.root :global(.scan-ai-city-chart-placeholder) {
@@ -121,7 +121,7 @@ export const AiCityTemperatureChart = memo(function AiCityTemperatureChart({ det
chartData.currentIndex != null && ctx.p0DataIndex < chartData.currentIndex ? [] : [6, 4],
},
spanGaps: true,
tension: 0.28,
tension: 0.1,
},
];
@@ -135,7 +135,7 @@ export const AiCityTemperatureChart = memo(function AiCityTemperatureChart({ det
pointHoverRadius: 5,
pointRadius: 0,
spanGaps: true,
tension: 0.32,
tension: 0.12,
});
}
+12 -3
View File
@@ -380,13 +380,22 @@ export function getTemperatureChartData(
validEntries.forEach((entry) => {
dataByHour.set(entry.tail, Number.isFinite(entry.value) ? entry.value : null);
});
const getHourTemp = (h: number): number | null => {
const key = `${String(h).padStart(2, "0")}:00`;
return dataByHour.has(key) ? dataByHour.get(key)! : null;
};
const times: string[] = [];
const temps: Array<number | null> = [];
for (let h = 0; h < 24; h++) {
const hh = String(h).padStart(2, "0");
const key = `${hh}:00`;
times.push(key);
temps.push(dataByHour.has(key) ? dataByHour.get(key)! : null);
times.push(`${hh}:00`);
temps.push(getHourTemp(h));
if (h < 23) {
const a = getHourTemp(h);
const b = getHourTemp(h + 1);
times.push(`${hh}:30`);
temps.push(a != null && b != null ? Number((a + (b - a) * 0.5).toFixed(1)) : a ?? b);
}
}
const suppressAnkaraMgmObservation = isTurkishMgmCity(detail);