Блог

Я хочу дополнительную всплывающую подсказку в моей таблице показателей, которая будет отображать yAxis значение. Эти всплывающие подсказки, о которых я говорю, вы видели на многих диаграммах ohlc. Для демонстрации я сделал это с помощью инструмента paint.

Если вы видите с правой стороны, наряду с основной всплывающей подсказкой, есть еще одна всплывающая подсказка, которая показывает 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]
    }]
});
  

Примечание: Для перекрестия, которое следует за указателем мыши, я устанавливаю для snap свойства crosshair для обеих осей значение false.

Вы можете использовать highstock исходный код и label свойство crosshair:

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

Живая демонстрация: https://jsfiddle.net/BlackLabel/yz4b6cus /

Ссылка на API: https://api.highcharts.com/highstock/xAxis.crosshair.label