javascript - 用于在右侧显示 yAxis 值的额外工具提示

Question

我想要在我的 Highcharts 中有一个额外的工具提示，它将显示 yAxis 值。我正在谈论的这些工具提示您已经在许多 ohlc 图表中看到过。为了演示目的，我使用绘画工具制作了它。

如果您在右侧看到主工具提示，还有另一个工具提示，显示 yAxis 值。我们怎样才能在 Highcharts 中做出同样的事情。我有以下代码。

Highcharts.chart('container', {
    title: {
        text: 'Non-snapped crosshair'
    },
    xAxis: {
        crosshair: {
            snap: false
        }
    },
    yAxis: {
        crosshair: {
            snap: false
        },
        opposite: true
    },
    tooltip: {
        borderWidth: 1,
        shape: 'rect',
        positioner: function () {
            return { x: 0, y: 0 };
        },
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

注意:为了使十字准线跟随鼠标指针，我将两个轴中的crosshair 的snap 属性设置为 false。

Answer 1

您可以使用 highstock 源代码和十字线的 label 属性:

yAxis: {
    crosshair: {
        snap: false,
        label: {
            enabled: true,
            format: '{value:.2f}'
        }
    },
    ...
},

现场演示:https://jsfiddle.net/BlackLabel/yz4b6cus/

API引用:https://api.highcharts.com/highstock/xAxis.crosshair.label