修复温度曲线三个渲染问题:数据点过少、张力过高、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:
@@ -47,7 +47,7 @@ export function DetailMiniTemperatureChart({ detail }: { detail: CityDetail }) {
|
|||||||
label: forecastLabel,
|
label: forecastLabel,
|
||||||
pointRadius: 0,
|
pointRadius: 0,
|
||||||
spanGaps: true,
|
spanGaps: true,
|
||||||
tension: 0.28,
|
tension: 0.1,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -60,7 +60,7 @@ export function DetailMiniTemperatureChart({ detail }: { detail: CityDetail }) {
|
|||||||
label: calibratedLabel,
|
label: calibratedLabel,
|
||||||
pointRadius: 0,
|
pointRadius: 0,
|
||||||
spanGaps: true,
|
spanGaps: true,
|
||||||
tension: 0.3,
|
tension: 0.1,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -106,8 +106,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.root :global(.detail-mini-chart canvas) {
|
.root :global(.detail-mini-chart canvas) {
|
||||||
width: 100% !important;
|
display: block;
|
||||||
height: 100% !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.root :global(.detail-mini-chart-legend) {
|
.root :global(.detail-mini-chart-legend) {
|
||||||
|
|||||||
@@ -785,8 +785,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.root :global(.intraday-scene-frame canvas) {
|
.root :global(.intraday-scene-frame canvas) {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ export function DailyTemperatureChart({
|
|||||||
label: locale === "en-US" ? "DEB baseline" : "DEB 原始路径",
|
label: locale === "en-US" ? "DEB baseline" : "DEB 原始路径",
|
||||||
parsing: false,
|
parsing: false,
|
||||||
pointRadius: 0,
|
pointRadius: 0,
|
||||||
tension: 0.3,
|
tension: 0.1,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (todayChartData.datasets.calibratedFutureSeries.length > 0) {
|
if (todayChartData.datasets.calibratedFutureSeries.length > 0) {
|
||||||
@@ -64,7 +64,7 @@ export function DailyTemperatureChart({
|
|||||||
parsing: false,
|
parsing: false,
|
||||||
pointHoverRadius: 5,
|
pointHoverRadius: 5,
|
||||||
pointRadius: 0,
|
pointRadius: 0,
|
||||||
tension: 0.32,
|
tension: 0.12,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -81,7 +81,7 @@ export function DailyTemperatureChart({
|
|||||||
pointHoverRadius: 6,
|
pointHoverRadius: 6,
|
||||||
pointRadius: 0,
|
pointRadius: 0,
|
||||||
spanGaps: true,
|
spanGaps: true,
|
||||||
tension: 0.3,
|
tension: 0.1,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -146,7 +146,7 @@ export function DailyTemperatureChart({
|
|||||||
label: locale === "en-US" ? "OM Raw" : "OM 原始",
|
label: locale === "en-US" ? "OM Raw" : "OM 原始",
|
||||||
parsing: false,
|
parsing: false,
|
||||||
pointRadius: 0,
|
pointRadius: 0,
|
||||||
tension: 0.3,
|
tension: 0.1,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if ((todayChartData.tafMarkers || []).length > 0) {
|
if ((todayChartData.tafMarkers || []).length > 0) {
|
||||||
@@ -342,7 +342,7 @@ export function DailyTemperatureChart({
|
|||||||
label:
|
label:
|
||||||
locale === "en-US" ? "Open-Meteo Temperature" : "Open-Meteo 温度",
|
locale === "en-US" ? "Open-Meteo Temperature" : "Open-Meteo 温度",
|
||||||
pointRadius: 2,
|
pointRadius: 2,
|
||||||
tension: 0.28,
|
tension: 0.1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
backgroundColor: "transparent",
|
backgroundColor: "transparent",
|
||||||
@@ -352,7 +352,7 @@ export function DailyTemperatureChart({
|
|||||||
fill: false,
|
fill: false,
|
||||||
label: locale === "en-US" ? "Dew Point" : "露点",
|
label: locale === "en-US" ? "Dew Point" : "露点",
|
||||||
pointRadius: 0,
|
pointRadius: 0,
|
||||||
tension: 0.24,
|
tension: 0.1,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
labels,
|
labels,
|
||||||
|
|||||||
@@ -54,7 +54,7 @@ export function HistoryChart() {
|
|||||||
pointBorderColor: "#fff",
|
pointBorderColor: "#fff",
|
||||||
pointHoverRadius: 7,
|
pointHoverRadius: 7,
|
||||||
pointRadius: 5,
|
pointRadius: 5,
|
||||||
tension: 0.2,
|
tension: 0.1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
backgroundColor: "transparent",
|
backgroundColor: "transparent",
|
||||||
@@ -65,7 +65,7 @@ export function HistoryChart() {
|
|||||||
label: locale === "en-US" ? "DEB Fusion" : "DEB 融合",
|
label: locale === "en-US" ? "DEB Fusion" : "DEB 融合",
|
||||||
pointHoverRadius: 6,
|
pointHoverRadius: 6,
|
||||||
pointRadius: 4,
|
pointRadius: 4,
|
||||||
tension: 0.2,
|
tension: 0.1,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -78,7 +78,7 @@ export function HistoryChart() {
|
|||||||
label: locale === "en-US" ? "MGM Official Forecast" : "MGM 官方预报",
|
label: locale === "en-US" ? "MGM Official Forecast" : "MGM 官方预报",
|
||||||
pointHoverRadius: 6,
|
pointHoverRadius: 6,
|
||||||
pointRadius: 4,
|
pointRadius: 4,
|
||||||
tension: 0.2,
|
tension: 0.1,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -95,7 +95,7 @@ export function HistoryChart() {
|
|||||||
: `最佳单模型 (${summary.bestModelName})`,
|
: `最佳单模型 (${summary.bestModelName})`,
|
||||||
pointHoverRadius: 6,
|
pointHoverRadius: 6,
|
||||||
pointRadius: 4,
|
pointRadius: 4,
|
||||||
tension: 0.2,
|
tension: 0.1,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1061,8 +1061,6 @@
|
|||||||
|
|
||||||
.root :global(.scan-ai-city-chart canvas) {
|
.root :global(.scan-ai-city-chart canvas) {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.root :global(.scan-ai-city-chart-placeholder) {
|
.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],
|
chartData.currentIndex != null && ctx.p0DataIndex < chartData.currentIndex ? [] : [6, 4],
|
||||||
},
|
},
|
||||||
spanGaps: true,
|
spanGaps: true,
|
||||||
tension: 0.28,
|
tension: 0.1,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -135,7 +135,7 @@ export const AiCityTemperatureChart = memo(function AiCityTemperatureChart({ det
|
|||||||
pointHoverRadius: 5,
|
pointHoverRadius: 5,
|
||||||
pointRadius: 0,
|
pointRadius: 0,
|
||||||
spanGaps: true,
|
spanGaps: true,
|
||||||
tension: 0.32,
|
tension: 0.12,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -380,13 +380,22 @@ export function getTemperatureChartData(
|
|||||||
validEntries.forEach((entry) => {
|
validEntries.forEach((entry) => {
|
||||||
dataByHour.set(entry.tail, Number.isFinite(entry.value) ? entry.value : null);
|
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 times: string[] = [];
|
||||||
const temps: Array<number | null> = [];
|
const temps: Array<number | null> = [];
|
||||||
for (let h = 0; h < 24; h++) {
|
for (let h = 0; h < 24; h++) {
|
||||||
const hh = String(h).padStart(2, "0");
|
const hh = String(h).padStart(2, "0");
|
||||||
const key = `${hh}:00`;
|
times.push(`${hh}:00`);
|
||||||
times.push(key);
|
temps.push(getHourTemp(h));
|
||||||
temps.push(dataByHour.has(key) ? dataByHour.get(key)! : null);
|
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);
|
const suppressAnkaraMgmObservation = isTurkishMgmCity(detail);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user