获取轻量图表中十字光标移动的起始和结束坐标数据

心靈之曲

发布时间：2025-10-13 11:29:02

909人浏览过

来源于php中文网

原创

获取轻量图表中十字光标移动的起始和结束坐标数据

本文旨在解决在使用 `lightweight-charts` 图表库时，如何通过监听十字光标移动事件，准确获取十字光标首次和最后一次移动时的 X 坐标值的问题。文章将详细介绍一种实现方案，该方案通过结合 `addEventListener` 和 `subscribeCrosshairMove()` 函数，并利用状态变量来跟踪十字光标的移动状态，从而实现对起始和结束坐标的精确捕获。

获取十字光标坐标数据的方案

在使用 lightweight-charts 时，经常需要获取十字光标移动时的坐标数据，例如，获取十字光标在图表上移动的起始位置和结束位置。直接在 subscribeCrosshairMove() 事件中简单地赋值，可能会因为事件的持续触发而导致无法准确获取到所需的值。

关键问题分析

原始代码尝试在 try 块内使用 let initialX 声明变量，导致每次事件触发时 initialX 都会被重新定义，因此 else 语句永远不会执行。同时，在十字光标移动结束之前，无法直接获取到最后一个 X 值，因为 subscribeCrosshairMove() 事件仍在持续触发。

解决方案

为了解决上述问题，我们需要将状态变量定义在事件监听器外部，并且需要一种机制来判断十字光标移动的开始和结束。以下是一种可行的解决方案：

GitHub Copilot

GitHub AI编程工具，实时编程建议

下载

定义状态变量： 在事件监听器外部定义一个对象 coordinates，用于存储十字光标的移动状态和坐标数据。
监听 Shift 键状态： 通过 mousemove 事件监听 Shift 键的按下和释放，以此来模拟十字光标移动的开始和结束。
在 crossHairEvent 中更新坐标： 在 crossHairEvent 函数中，根据 Shift 键的状态来更新 coordinates 对象中的 fromX 和 toX 值。
保存坐标数据： 当 fromX 和 toX 都被赋值后，将它们的值保存到 fromX 和 toX 变量中，并将 coordinates.fromX 和 coordinates.toX 重置为 null，以便下次可以重新记录坐标。

代码示例

let coordinates = {
    shiftKey: false,
    fromX: null,
    toX : null
}

let fromX = null;
let toX = null;

// Register the shiftKey pressing  & releasing.
document.addEventListener('mousemove', function( e ){ 

    if( e.shiftKey && !coordinates.shiftKey ) {
        coordinates.shiftKey = true;
    }

    if( !e.shiftKey && coordinates.shiftKey ) {
        coordinates.shiftKey = false;
    }

})

async function crossHairEvent(param){
    try{
        // Register the fromX
        if( coordinates.shiftKey && !coordinates.fromX ) {
            coordinates.fromX = param.time;
        }
        // Register the toX
        if( !coordinates.shiftKey && !coordinates.toX ) {
            coordinates.toX = param.time;
        }

        // Save the values in a deifferent variables.
        if( coordinates.fromX &&  coordinates.toX ) {
            fromX = coordinates.fromX;
            toX = coordinates.toX ;

            // Set them to null to make it possible to register every time you release the shiftKey.
            coordinates.fromX = null;
            coordinates.toX = null;

        }
    }
    catch{}
};

chart.subscribeCrosshairMove(crossHairEvent);

代码解释：

coordinates 对象用于存储 Shift 键的状态 (shiftKey) 和起始坐标 (fromX) 和结束坐标 (toX)。
mousemove 事件监听器用于检测 Shift 键的按下和释放，并更新 coordinates.shiftKey 的值。
crossHairEvent 函数在每次十字光标移动时被调用。它首先检查 Shift 键是否被按下，以及 coordinates.fromX 是否为空。如果 Shift 键被按下且 coordinates.fromX 为空，则将 param.time 赋值给 coordinates.fromX。类似地，当 Shift 键被释放且 coordinates.toX 为空时，将 param.time 赋值给 coordinates.toX。
当 coordinates.fromX 和 coordinates.toX 都有值时，将它们的值分别赋值给 fromX 和 toX 变量，并将 coordinates.fromX 和 coordinates.toX 重置为 null，以便下次可以重新记录坐标。