Question

As shown in screenshot I need my crosshair to move across the points but the tooltip value is snap to next value even the crosshair is not reached that point.我在高级图表中遇到了一个问题。我想当我将鼠标悬停在图表周围时，十字准线应该反映正在悬停的当前点的值。如代码中所示，当前其更改值处于中间状态，相对于十字准线而言，该值未反映正确的值。

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

这是因为您将xAxis.crosschair.snap设置为等于false。实际上，您可以删除snap: false定义，因为默认情况下将其设置为true。然后它应该表现出您想要的样子。

[编辑]

如果您想显示当前的交叉椅xAxis值，则不会在Highcharts中实现，但是Highstock具有自己的xAxis.crosschair.label属性，可以满足您所需的功能。这是示例和文档：

http://jsfiddle.net/hzcuf68y/

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

如果您不想更改Highstock的Highcharts，可以参考此演示，其中的交叉椅和标签是手动呈现的：http://jsfiddle.net/mr1c03ae/

实时示例： https://jsfiddle.net/n7bawfcg/

API参考： https://api.highcharts.com/highcharts/xAxis.crosshair.snap

Answer 2

经过大量研究，如果有人可能遇到相同的问题，我得到的解决方案只是在此处发布。 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>

如何在Highcharts Crosshair中显示悬停的点值

2 个答案: