jQuery Flot Graph：显示工具提示而不悬停/点击这些点

Question

目前我正在研究Line type jQuery Flot图。其中，在悬停在数据点上时，它显示工具提示。我还绑定了plotclick事件处理程序，因为在点击数据点时，它会提供有关该点的更多信息。

现在，我想显示特定数据点以显示工具提示，而不会悬停或点击这些点。

我想到的一个想法是：

我创建了一个名为shownotetip（）的函数。如下面的代码所示：

      function shownotetip(x,y,contents, colour){
            $('<div id="value">' +  contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y,
            left: x,
            'border-style': 'solid',
            'border-width': '2px',
            'border-color': colour,
            'border-radius': '5px',
            'background-color': '#ffffff',
            color: '#262626',
            padding: '2px'
            }).appendTo("body").fadeIn(200);
          }

此函数有四个参数

x -> x-Position, y -> y-position, contents and colour

现在，当我使用虚拟值调用此函数时，例如：

 a = 360;
 b = 379;
 c = "<p>Hello</p>";
 shownotetip(a, b, c); //colour parameter is optional

然后我得到图表上的工具提示框（这是所需的）。但是，我想要的是使用pageX和pageY值（plothover通过其获取位置值）在某些点显示工具提示。 任何帮助将不胜感激。感谢

Answer 1

您可以将.p2c功能与.offset功能结合使用，将点位置转换为屏幕坐标。

例如，给定一个数据数组d1，这会将您的工具提示放在其他每一点上：

var divPos = somePlot.offset();
for (var i = 0; i < d1.length; i+=2) {
    pos = somePlot.p2c({x: d1[i][0], y: d1[i][1]}); 
    shownotetip(pos.left+divPos.left, pos.top+divPos.top, i);
}

这是fiddle。

Answer 2

我建议使用此插件https://github.com/krzysu/flot.tooltip 非常容易和习惯