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

feat: 折线图2秒后自动失焦

Browse Source
This commit is contained in:
hzm
2026-02-24 22:05:11 +08:00
parent 194f9246ef
commit 42327fc110
2 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/FundIntradayChart.jsx
View File

@@ -105,19 +105,28 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
},
onHover: (event, chartElement, chart) => {
const target = event?.native?.target;
if (target) {
target.style.cursor = chartElement[0] ? 'crosshair' : 'default';
}
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 (chartElement[0]) {
if (hasActive) {
hoverTimeoutRef.current = setTimeout(() => {
const c = chartRef.current || currentChart;
if (!c) return;

40
app/components/FundTrendChart.jsx
View File

@@ -220,10 +220,25 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
},
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 = chartElement[0] ? 'crosshair' : 'default';
target.style.cursor = hasActive ? 'crosshair' : 'default';
}
// 仅用于桌面端 hover 改变光标，不在这里做 2 秒清除，避免移动端 hover 事件不稳定
},
onClick: (_event, _elements, chart) => {
const currentChart = chart || chartRef.current;
if (!currentChart) return;
@@ -232,20 +247,15 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
hoverTimeoutRef.current = null;
}
if (chartElement[0]) {
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);
}
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();
}, 2000);
}
};
}, []);