lightweight-charts点击添加价格线：如何获取十字准星点击位置的价格？

问题分析 #

你已经通过chart.subscribeClick实现了点击事件监听，但当前代码获取的是点击时间点对应K线的价格（data.value/data.close），这和十字准星显示的鼠标位置精确价格并不一致——当点击位置落在K线间隙时，返回的是最近K线的数据，而非鼠标指向的精确价位。

正确实现方法 #

要获取十字准星位置的精确价格，直接使用系列（series）的coordinateToPrice()方法，将鼠标点击的Y坐标转换为对应系列的价格，代码如下：

function myClickHandler(param) {
    if (!param.point) return;

    // 将鼠标点击的Y坐标转换为当前series的精确价格
    const exactPrice = series.coordinateToPrice(param.point.y);
    const formattedPrice = exactPrice.toFixed(2);
    console.log("十字准星位置价格：", formattedPrice);

    // 创建价格线
    series.createPriceLine({
        price: exactPrice,
        color: '#FF4081',
        lineWidth: 2,
        lineStyle: 1,
        axisLabelVisible: true,
    });
}

chart.subscribeClick(myClickHandler);

关键知识点 #

• coordinateToPrice(y: number)：lightweight-charts系列的内置方法，负责将画布上的像素Y坐标映射为该系列的实际价格，完全匹配十字准星显示的数值。
• 无需依赖param.time或seriesData：这两个值对应的是K线数据，而非鼠标点击的精确位置，仅当点击恰好落在K线上时才会一致。

可选：实时验证十字准星价格 #

如果需要确认点击价格和十字准星显示的价格一致，可以监听十字准星移动事件：

chart.subscribeCrosshairMove((param) => {
    if (param.point && param.seriesData.get(series)) {
        const crosshairPrice = param.seriesData.get(series).price;
        console.log("实时十字准星价格：", crosshairPrice.toFixed(2));
    }
});

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