在轻量图表的交互场景中，十字光标是用户查看具体数据点的常用工具，获取其移动的起始和结束坐标数据，能够支撑区间数据查询、自定义标注等高级功能，实现过程需要结合图表的事件监听机制和坐标转换逻辑。
核心实现思路
轻量图表通常会暴露十字光标相关的事件回调，我们可以在初始化图表时注册对应的监听函数，在光标移动时捕获位置信息，再结合图表的坐标转换方法，将屏幕像素坐标转换为图表对应的数据坐标，即可拿到需要的起始和结束坐标数据。
前置准备
首先需要在HTML页面中引入轻量图表的相关资源，这里以常用的轻量图表库为例，基础引入方式如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取十字光标坐标</title>
<!-- 引入轻量图表库 -->
<script src="https://ipipp.com/lightweight-chart.js"></script>
</head>
<body>
<div id="chartContainer" style="width: 800px; height: 400px;"></div>
<div id="coordInfo"></div>
</body>
</html>具体实现步骤
1. 初始化图表并注册事件
创建图表实例后，通过subscribeCrosshairMove方法注册十字光标移动监听，同时定义变量存储起始和结束坐标：
// 初始化图表
const chart = LightweightCharts.createChart(document.getElementById('chartContainer'), {
width: 800,
height: 400,
crosshair: {
mode: LightweightCharts.CrosshairMode.Normal,
},
});
// 添加示例数据
const lineSeries = chart.addLineSeries();
lineSeries.setData([
{ time: '2024-01-01', value: 100 },
{ time: '2024-01-02', value: 120 },
{ time: '2024-01-03', value: 110 },
{ time: '2024-01-04', value: 130 },
]);
// 存储起始和结束坐标的变量
let startCoord = null;
let endCoord = null;
let isFirstMove = true;
// 监听十字光标移动事件
chart.subscribeCrosshairMove((param) => {
if (!param.time) {
return;
}
// 获取当前光标的屏幕坐标
const currentScreenCoord = {
x: param.point.x,
y: param.point.y,
};
// 获取当前光标对应的数据坐标
const currentDataCoord = {
time: param.time,
value: param.seriesData.get(lineSeries)?.value,
};
// 判断是否为首次移动，记录起始坐标
if (isFirstMove) {
startCoord = {
screen: currentScreenCoord,
data: currentDataCoord,
};
isFirstMove = false;
console.log('十字光标起始坐标：', startCoord);
} else {
// 更新结束坐标
endCoord = {
screen: currentScreenCoord,
data: currentDataCoord,
};
console.log('十字光标结束坐标：', endCoord);
// 在页面展示坐标信息
document.getElementById('coordInfo').innerHTML = `
起始坐标：屏幕(${startCoord.screen.x}, ${startCoord.screen.y}) 数据(时间：${startCoord.data.time}, 值：${startCoord.data.value})
结束坐标：屏幕(${endCoord.screen.x}, ${endCoord.screen.y}) 数据(时间：${endCoord.data.time}, 值：${endCoord.data.value})
`;
}
});2. 坐标转换逻辑
如果需要将屏幕像素坐标转换为图表时间坐标，还可以使用图表实例提供的timeScale相关方法，示例如下：
// 将屏幕X坐标转换为时间
function screenXToTime(x) {
return chart.timeScale().coordinateToTime(x);
}
// 将时间转换为屏幕X坐标
function timeToScreenX(time) {
return chart.timeScale().timeToCoordinate(time);
}
// 示例：转换当前结束坐标的屏幕X为时间
if (endCoord) {
const endTime = screenXToTime(endCoord.screen.x);
console.log('结束坐标屏幕X对应的时间：', endTime);
}3. 重置坐标逻辑
当十字光标离开图表区域时，需要重置起始坐标标记，避免后续计算错误，可通过unsubscribeCrosshairMove或监听光标离开事件实现：
// 监听光标离开图表区域，重置起始标记
chart.subscribeCrosshairMove((param) => {
if (!param.point) {
isFirstMove = true;
startCoord = null;
endCoord = null;
document.getElementById('coordInfo').innerHTML = '十字光标已离开图表区域';
}
});注意事项
- 不同轻量图表库的事件参数结构可能存在差异，需要根据实际使用的库文档调整参数获取逻辑。
- 如果图表存在缩放、平移操作，坐标转换方法会自动适配当前视图范围，无需额外处理。
- 存储坐标数据时建议添加边界判断，避免光标未移动到数据区域时出现空值报错。
- 若需要获取多系列数据对应的坐标，可通过
param.seriesData遍历所有系列的取值。
HTMLJavaScript轻量图表十字光标坐标数据获取修改时间：2026-06-03 03:01:40