feat: 完善折线图2秒后自动失焦
This commit is contained in:
@@ -238,25 +238,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
|
|||||||
|
|
||||||
// 仅用于桌面端 hover 改变光标,不在这里做 2 秒清除,避免移动端 hover 事件不稳定
|
// 仅用于桌面端 hover 改变光标,不在这里做 2 秒清除,避免移动端 hover 事件不稳定
|
||||||
},
|
},
|
||||||
onClick: (_event, _elements, chart) => {
|
onClick: () => {}
|
||||||
const currentChart = chart || chartRef.current;
|
|
||||||
if (!currentChart) return;
|
|
||||||
|
|
||||||
if (hoverTimeoutRef.current) {
|
|
||||||
clearTimeout(hoverTimeoutRef.current);
|
|
||||||
hoverTimeoutRef.current = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@@ -270,6 +252,27 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
|
|||||||
|
|
||||||
const plugins = useMemo(() => [{
|
const plugins = useMemo(() => [{
|
||||||
id: 'crosshair',
|
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) => {
|
afterDraw: (chart) => {
|
||||||
const ctx = chart.ctx;
|
const ctx = chart.ctx;
|
||||||
const datasets = chart.data.datasets;
|
const datasets = chart.data.datasets;
|
||||||
|
|||||||
Reference in New Issue
Block a user