如何检测TradingView轻量图表中十字准线是否可见？

TradingView轻量图表（Lightweight Charts）的官方API目前确实没有直接提供十字准线可见状态的查询接口，只能通过配置项设置显示模式，但无法直接读取当前是否可见。以下是几种可行的解决思路：

1. 手动追踪十字准线配置状态 #

如果你的十字准线显示模式完全由代码控制，可以自己维护一个状态变量，每次修改配置时同步更新状态：

// 初始化图表时设置初始状态
let isCrosshairVisible = false;
const chart = LightweightCharts.createChart(document.getElementById('chart'), {
    crosshair: { mode: LightweightCharts.CrosshairMode.Never }
});

// 封装修改十字准线模式的方法，同步更新状态
function updateCrosshairMode(mode) {
    isCrosshairVisible = mode !== LightweightCharts.CrosshairMode.Never;
    chart.applyOptions({ crosshair: { mode } });
}

// 后续需要检测时直接读取变量
if (isCrosshairVisible) {
    // 执行对应逻辑
}

局限：仅适用于代码主动控制模式的场景，无法捕捉用户通过图表内置交互（如右键菜单）修改的情况。

2. DOM元素检测（推荐覆盖全场景） #

轻量图表的十字准线由两个类名为tv-crosshair-vertical和tv-crosshair-horizontal的DOM元素组成，可通过检测这些元素的可见性来判断：

// 获取十字准线DOM元素
const crosshairV = document.querySelector('.tv-crosshair-vertical');
const crosshairH = document.querySelector('.tv-crosshair-horizontal');

// 检测函数：元素可见时offsetParent不为null
function checkCrosshairVisibility() {
    return (crosshairV?.offsetParent !== null) || (crosshairH?.offsetParent !== null);
}

// 方式1：结合十字准线移动事件触发检测
chart.subscribeCrosshairMove(() => {
    const visible = checkCrosshairVisibility();
    console.log('十字准线可见:', visible);
});

// 方式2：用MutationObserver监听样式变化，实时追踪状态
const observer = new MutationObserver(() => {
    const visible = checkCrosshairVisibility();
    console.log('十字准线状态变更:', visible);
});

// 启动监听（确保元素已存在）
if (crosshairV) observer.observe(crosshairV, { attributes: true, attributeFilter: ['style'] });
if (crosshairH) observer.observe(crosshairH, { attributes: true, attributeFilter: ['style'] });

优势：能覆盖所有场景，包括用户手动切换的情况；注意：DOM类名可能随版本更新变化，需测试兼容性。

3. 结合十字准线移动事件判断 #

利用subscribeCrosshairMove事件的触发特性：十字准线可见时，鼠标移动会触发该事件；隐藏时则不会。通过定时器辅助判断：

let isCrosshairVisible = false;
let crosshairTimeout;

// 十字准线移动时标记为可见，并重置定时器
chart.subscribeCrosshairMove(() => {
    isCrosshairVisible = true;
    clearTimeout(crosshairTimeout);
    // 500ms无移动则标记为不可见
    crosshairTimeout = setTimeout(() => {
        isCrosshairVisible = false;
    }, 500);
});

// 检测时读取状态
function getCrosshairStatus() {
    return isCrosshairVisible;
}

适用场景：适合判断“当前是否因鼠标悬停显示十字准线”，若十字准线设为始终显示，状态会持续为true。

内容的提问来源于stack exchange，提问作者willbeing