Highcharts - 仅当直接悬停在点上时才显示工具提示 [英] Highcharts - only show tooltip when hovering directly on point

问题描述

highcharts的默认体验似乎是指向游标的最近点（水平）处于悬停状态。这意味着当你获得超过一半的线路中的下一个点时，会触发一个工具提示。当我直接悬停在一个点上时，我想要一个工具提示触发器，然后保持活动状态，直到我直接悬停在另一个点上。

以下是相关代码的小问题：

http://jsfiddle.net/qNLu2/

 <$ $ {
}，
 xAxis：{
类别：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'] 
}，
 
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4] 
}，{
数据：[144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4,29.9,71.5,106.4,129.2] 
}] 
}）; 
  

}）;

解决方案

它与折线图使用的pointTracker相关，但您可以使用scatter系列和设置lineWidth：

http://jsfiddle.net/qNLu2/1/

 图表：{
 
类型：'scatter'
}，
 
系列：[{
 lineWidth：2，
 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] 
}] 
  

The default experience for highcharts seems to be that the closest point to your cursor (horizontally) is in a hover state. This means that a tooltip is triggered when you get more than halfway toward the next point in the line. I want to have a tooltip trigger when I hover directly over a point, and then remain active until I hover directly over a different point.

Here is a fiddle of the issue, with the corresponding code below:

http://jsfiddle.net/qNLu2/

$(function () {
$('#container').highcharts({
    chart: {
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    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]
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]
});

});

解决方案

It is related with pointTracker, which is used by Line chart, but you can use scatter series and setting lineWidth:

http://jsfiddle.net/qNLu2/1/

 chart: {

        type: 'scatter'
    },

    series: [{
        lineWidth:2,
        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]        
    }]

这篇关于Highcharts - 仅当直接悬停在点上时才显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！