javascript – jQuery Flot Graph：显示工具提示,无需悬停/点击点

目前我正在研究线型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位置,y – > y位置,内容和颜色

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

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

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

解决方法:

您可以将.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.

标签：javascript,jquery,flot,graph
来源： https://codeday.me/bug/20190831/1776257.html