3

Currently I am working on Line type jQuery Flot graph. In which, on hovering over the data point it shows the tooltip. I have also bind the plotclick event handler due to which, on clicking the data point, gives more information about the point.

Now, I want to show specific data points to display the tooltip without hovering or clicking on these points.

An idea which came to me to accomplish this is:

I created one function called shownotetip(). As seen in code below:

      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);
          }

This function takes four parameters which are

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

Now when I call this function using dummy values such as :

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

then I get the tooltip box on the graph(which is desired). However, what I want is to display the tooltip at the certain points using the pageX and pageY value (through which plothover takes position value). Any help will be appreciated. Thanks

4

2 回答 2

4

您可以使用该.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);
}

这是一个小提琴。

在此处输入图像描述

于 2013-09-21T15:42:11.803 回答
1

我推荐使用这个插件https://github.com/krzysu/flot.tooltip 非常简单和可定制

于 2014-02-24T15:46:26.817 回答