Как отобразить значение зависшей точки в Highcharts Crosshair

Question

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

Highcharts.chart('container', {

    tooltip: {
     snap: -1,
        crosshairs: true
    },
    xAxis:{
     crosshair: {
                interpolate: true,  
                color: 'gray',
                snap: false
            },
    },
plotOptions: {

    line: {
        marker: {
            enabled: false
        }
    },
   
},
    series: [{
    marker: {
                states: {
                    hover: {
                        enabled: false
                    }
                }
            },
         step:'left',
        data: [0, 1, 0,  1,  0, 1, 0]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Answer 1

После многих исследований я получил решение, просто разместив здесь сообщение, если кто-то может столкнуться с той же проблемой. http://jsfiddle.net/F4e2Y/70/

function interpolate(data) {
    var resolution = 0.1,
        interpolatedData = [];
    data.forEach(function(point, i) {
        var x;
        if (i > 0) {
            for (x = data[i - 1].x + resolution; x < point.x; x += resolution) {
                interpolatedData.push({
                    x: Highcharts.correctFloat(x),
                    y: Highcharts.correctFloat(data[i - 1].y),
                });
            }
        }
        interpolatedData.push(point)

    });
    return interpolatedData;
}


var data = [{
    x: 0,
    y: 1
}, {
    x: 2,
    y: 0
}, {
    x: 4,
    y: 1
}, {
    x: 6,
    y: 1
}, {
    x: 8,
    y: 0
}, {
    x: 10,
    y: 1
}];



Highcharts.chart('container', {
chart:{
zoomType: 'x',
},
    tooltip: {
        shared: true
    },

    xAxis: {
        crosshair: true
    },

    series: [{
    
       step:'left',
        data: interpolate(data),
    }]

});

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>

Answer 2

Это потому, что вы установили xAxis.crosschair.snap равным false. На самом деле, вы можете удалить определение snap: false, потому что оно установлено на true по умолчанию. Тогда он должен вести себя так, как вы хотите.

[EDIT]

Если вы хотите показать текущее значение xAxis кросс-цепей, оно не реализовано в Highcharts, но у Highstock есть собственное свойство xAxis.crosschair.label, которое обслуживает нужную вам функцию. Вот пример и документация:

http://jsfiddle.net/hzcuf68y/

https://api.highcharts.com/highstock/xAxis.crosshair.label

Если вы не хотите менять Highcharts для Highstock, вы можете обратиться к этой демонстрации, где перекрестные линии и метки отображаются вручную: http://jsfiddle.net/mr1c03ae/

Живой пример: https://jsfiddle.net/n7bawfcg/

Справочник по API: https://api.highcharts.com/highcharts/xAxis.crosshair.snap