diff --git a/app/components/FundIntradayChart.jsx b/app/components/FundIntradayChart.jsx index 4d11516..6fb79a9 100644 --- a/app/components/FundIntradayChart.jsx +++ b/app/components/FundIntradayChart.jsx @@ -1,6 +1,6 @@ 'use client'; -import { useMemo } from 'react'; +import { useMemo, useRef, useEffect } from 'react'; import { Chart as ChartJS, CategoryScale, @@ -27,6 +27,9 @@ ChartJS.register( * referenceNav: 参考净值(最新单位净值),用于计算涨跌幅;未传则用当日第一个估值作为参考。 */ export default function FundIntradayChart({ series = [], referenceNav }) { + const chartRef = useRef(null); + const hoverTimeoutRef = useRef(null); + const chartData = useMemo(() => { if (!series.length) return { labels: [], datasets: [] }; const labels = series.map((d) => d.time); @@ -91,7 +94,7 @@ export default function FundIntradayChart({ series = [], referenceNav }) { }, y: { display: true, - position: 'right', + position: 'left', grid: { color: '#1f2937', drawBorder: false }, ticks: { color: '#9ca3af', @@ -100,11 +103,54 @@ export default function FundIntradayChart({ series = [], referenceNav }) { } } }, - onHover: (event, chartElement) => { - event.native.target.style.cursor = chartElement[0] ? 'crosshair' : 'default'; + onHover: (event, chartElement, chart) => { + const target = event?.native?.target; + const currentChart = chart || chartRef.current; + if (!currentChart) return; + + const tooltipActive = currentChart.tooltip?._active ?? []; + const activeElements = currentChart.getActiveElements + ? currentChart.getActiveElements() + : []; + const hasActive = + (chartElement && chartElement.length > 0) || + (tooltipActive && tooltipActive.length > 0) || + (activeElements && activeElements.length > 0); + + if (target) { + target.style.cursor = hasActive ? 'crosshair' : 'default'; + } + + if (hoverTimeoutRef.current) { + clearTimeout(hoverTimeoutRef.current); + hoverTimeoutRef.current = null; + } + + if (hasActive) { + hoverTimeoutRef.current = setTimeout(() => { + const c = chartRef.current || currentChart; + if (!c) return; + c.setActiveElements([]); + if (c.tooltip) { + c.tooltip.setActiveElements([], { x: 0, y: 0 }); + } + c.update(); + if (target) { + target.style.cursor = 'default'; + } + }, 2000); + } } }), []); + useEffect(() => { + return () => { + if (hoverTimeoutRef.current) { + clearTimeout(hoverTimeoutRef.current); + } + }; + }, []); + const plugins = useMemo(() => [{ id: 'crosshair', afterDraw: (chart) => { @@ -157,9 +203,9 @@ export default function FundIntradayChart({ series = [], referenceNav }) { const valueStr = typeof val === 'number' ? `${val >= 0 ? '+' : ''}${val.toFixed(2)}%` : String(val); const vw = ctx.measureText(valueStr).width + 8; ctx.fillStyle = prim; - ctx.fillRect(rightX - vw, y - 8, vw, 16); + ctx.fillRect(leftX, y - 8, vw, 16); ctx.fillStyle = bgText; - ctx.fillText(valueStr, rightX - vw / 2, y); + ctx.fillText(valueStr, leftX + vw / 2, y); } ctx.restore(); } @@ -191,7 +237,7 @@ export default function FundIntradayChart({ series = [], referenceNav }) { {displayDate && 估值日期 {displayDate}}
- +
); diff --git a/app/components/FundTrendChart.jsx b/app/components/FundTrendChart.jsx index f8edc06..2cefd7c 100644 --- a/app/components/FundTrendChart.jsx +++ b/app/components/FundTrendChart.jsx @@ -35,6 +35,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const chartRef = useRef(null); + const hoverTimeoutRef = useRef(null); useEffect(() => { // If collapsed, don't fetch data unless we have no data yet @@ -198,7 +199,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans }, y: { display: true, - position: 'right', + position: 'left', grid: { color: '#1f2937', drawBorder: false, @@ -217,14 +218,61 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans mode: 'index', intersect: false, }, - onHover: (event, chartElement) => { - event.native.target.style.cursor = chartElement[0] ? 'crosshair' : 'default'; + onHover: (event, chartElement, chart) => { + const target = event?.native?.target; + const currentChart = chart || chartRef.current; + if (!currentChart) return; + + const tooltipActive = currentChart.tooltip?._active ?? []; + const activeElements = currentChart.getActiveElements + ? currentChart.getActiveElements() + : []; + const hasActive = + (chartElement && chartElement.length > 0) || + (tooltipActive && tooltipActive.length > 0) || + (activeElements && activeElements.length > 0); + + if (target) { + target.style.cursor = hasActive ? 'crosshair' : 'default'; + } + + // 仅用于桌面端 hover 改变光标,不在这里做 2 秒清除,避免移动端 hover 事件不稳定 + }, + onClick: () => {} + }; + }, []); + + useEffect(() => { + return () => { + if (hoverTimeoutRef.current) { + clearTimeout(hoverTimeoutRef.current); } }; }, []); const plugins = useMemo(() => [{ id: 'crosshair', + afterEvent: (chart, args) => { + const { event, replay } = args || {}; + if (!event || replay) return; // 忽略动画重放 + + const type = event.type; + if (type === 'mousemove' || type === 'click') { + if (hoverTimeoutRef.current) { + clearTimeout(hoverTimeoutRef.current); + hoverTimeoutRef.current = null; + } + + hoverTimeoutRef.current = setTimeout(() => { + if (!chart) return; + chart.setActiveElements([]); + if (chart.tooltip) { + chart.tooltip.setActiveElements([], { x: 0, y: 0 }); + } + chart.update(); + }, 2000); + } + }, afterDraw: (chart) => { const ctx = chart.ctx; const datasets = chart.data.datasets; @@ -360,10 +408,10 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans const valueStr = (typeof value === 'number' ? value.toFixed(2) : value) + '%'; const valWidth = ctx.measureText(valueStr).width + 8; ctx.fillStyle = primaryColor; - ctx.fillRect(rightX - valWidth, y - 8, valWidth, 16); + ctx.fillRect(leftX, y - 8, valWidth, 16); ctx.fillStyle = '#0f172a'; // --background ctx.textAlign = 'center'; - ctx.fillText(valueStr, rightX - valWidth / 2, y); + ctx.fillText(valueStr, leftX + valWidth / 2, y); } }