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

希望这会有所帮助！

如何在高图中移动光标时在工具提示上显示精确值

1 个答案: