Как отобразить точное значение во всплывающей подсказке при перемещении курсора в верхних графиках

Question

Я работаю с высокими графиками. Мое требование - показывать данные, когда пользователь наводит курсор на конкретную точку, но поведение по умолчанию на высоких графиках - это нечто иное. Как показано во фрагменте кода, при наведении курсора из одной точки в другую значение подсказки изменяется в середине пути. Я хочу, чтобы когда курсор прибыл в точку, он должен изменить значение не в середине двух точек.

Highcharts.chart('container', {

    title: {
        text: 'Logarithmic axis demo'
    },

    xAxis: {
        tickInterval: 1
    },

    yAxis: {
        type: 'logarithmic',
        minorTickInterval: 0.1
        
    },

    tooltip: {
        crosshairs: true,
         backgroundColor: 'white',
            positioner: function () {
                return {
                    x: this.chart.plotLeft,
                    y: this.chart.plotTop
                }
            },
    },
  

    series: [{
        data: [1,0,1,1,0,0,0,1],
        step: 'left'
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

Вы можете использовать опцию snap подсказки и установить ее значение равным -1. А также установите stickyTracking на false. Это позволит регистрировать событие наведения мыши только в том случае, если указатель мыши находится точно над определенной точкой, и не вызывает событие наведения мыши для отображения всплывающей подсказки на полпути между двумя точками.

Вы можете настроить значение snap, чтобы определить, начиная с того, где должна отображаться подсказка для точки. По умолчанию это 10px. То есть, когда мышь входит в радиус 10px вокруг точки, появится всплывающая подсказка.

Highcharts.chart('container', {

    title: {
        text: 'Logarithmic axis demo'
    },

    xAxis: {
        tickInterval: 1
    },

    yAxis: {
        type: 'logarithmic',
        minorTickInterval: 0.1
        
    },

    tooltip: {
        crosshairs: true,
        snap: -1,
        hideDelay: 5000,
         backgroundColor: 'white',
            positioner: function () {
                return {
                    x: this.chart.plotLeft,
                    y: this.chart.plotTop
                }
            },
    },
    
        plotOptions: {
        series: {
            stickyTracking: false
        }
    },
  

    series: [{
        data: [1,0,1,1,0,0,0,1],
        step: 'left'
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

https://api.highcharts.com/highcharts/tooltip.snap https://api.highcharts.com/highcharts/plotOptions.series.stickyTracking

Надеюсь, это поможет!