leemuzi/real-time-fund
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 折线图最右侧x轴展示问题

Browse Source
This commit is contained in:
hzm
2026-02-25 17:43:42 +08:00
parent 1176a4ba18
commit 5f12e9d900
4 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/FundIntradayChart.jsx
View File

@@ -193,10 +193,16 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
if (labels && index in labels) {
const timeStr = String(labels[index]);
const tw = ctx.measureText(timeStr).width + 8;
const chartLeft = chart.scales.x.left;
const chartRight = chart.scales.x.right;
let labelLeft = x - tw / 2;
if (labelLeft < chartLeft) labelLeft = chartLeft;
if (labelLeft + tw > chartRight) labelLeft = chartRight - tw;
const labelCenterX = labelLeft + tw / 2;
ctx.fillStyle = prim;
ctx.fillRect(x - tw / 2, bottomY, tw, 16);
ctx.fillRect(labelLeft, bottomY, tw, 16);
ctx.fillStyle = bgText;
ctx.fillText(timeStr, x, bottomY + 8);
ctx.fillText(timeStr, labelCenterX, bottomY + 8);
}
if (data && index in data) {
const val = data[index];

12
app/components/FundTrendChart.jsx
View File

@@ -397,12 +397,18 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
const value = datasets[datasetIndex].data[index];
if (dateStr !== undefined && value !== undefined) {
// X axis label (date)
// X axis label (date) with boundary clamping
const textWidth = ctx.measureText(dateStr).width + 8;
const chartLeft = chart.scales.x.left;
const chartRight = chart.scales.x.right;
let labelLeft = x - textWidth / 2;
if (labelLeft < chartLeft) labelLeft = chartLeft;
if (labelLeft + textWidth > chartRight) labelLeft = chartRight - textWidth;
const labelCenterX = labelLeft + textWidth / 2;
ctx.fillStyle = primaryColor;
ctx.fillRect(x - textWidth / 2, bottomY, textWidth, 16);
ctx.fillRect(labelLeft, bottomY, textWidth, 16);
ctx.fillStyle = '#0f172a'; // --background
ctx.fillText(dateStr, x, bottomY + 8);
ctx.fillText(dateStr, labelCenterX, bottomY + 8);
// Y axis label (value)
const valueStr = (typeof value === 'number' ? value.toFixed(2) : value) + '%';