jQuery / Flot：你如何得到数据点的坐标？

我目前正在查看http://people.iola.dk/olau/flot/examples/interacting.html上的示例，但我无法弄清楚，如何获取数据点的坐标。 我不会点击Plot所以我无法使用事件plotclick。 现在我的问题是：有没有另一种方法来获取数据点的x和y坐标，而不是点击？ 我将使用jQuery滑块突出显示图表上的不同点，并希望在数据点旁边有一个工具提示。

提前致谢 ：）

Answer 1

稍晚一点，但是在绘制图表之后我运行了这个函数，作为在线图中将标签放在我的绘制数据点下面的一种方式。

$(document).ready(function(){ $(function(){ var data = [ {data: [[1, 5], [2, 10], [3, 15], [4, 15], [5, 10], [6, 5]], color: '#3a8df6'}, {data: [[1, 52], [2, 42], [3, 32], [4, 32], [5, 42], [6, 52]], color: '#ff0000'} ]; var options = { lines: {show: true}, yaxis: {tickDecimals: 0, min: 0, max: 100, autoscaleMargin: null} }; var graph = $.plot($('#graph'), data, options); var points = graph.getData(); var graphx = $('#graph').offset().left; graphx = graphx + 30; // replace with offset of canvas on graph var graphy = $('#graph').offset().top; graphy = graphy + 10; // how low you want the label to hang underneath the point for(var k = 0; k < points.length; k++){ for(var m = 0; m < points[k].data.length; m++){ showTooltip(graphx + points[k].xaxis.p2c(points[k].data[m][0]), graphy + points[k].yaxis.p2c(points[k].data[m][1]),points[k].data[m][1]) } } }); }); function showTooltip(x,y,contents){ $('
' + contents + '
').css( { position: 'absolute', display: 'none', top: y, left: x }).appendTo("body").fadeIn(200); } 

这是我的头脑，但基本上，这个函数遍历所有的数据点并使用轴中的p2c函数，然后它将这个（带有一些填充）添加到图形本身的偏移量。 然后它只使用正常的工具提示叠加。

此外，如果在条形图上使用此选项，您可以设置工具提示的宽度，为其指定文本对齐中心，然后如果您希望所有标签都在一行中，则只需在yaxis p2c函数中放入一个数字。 然后使用图形填充将其放置在您想要的位置。

希望这有助于未来的人:)

Answer 2

从flot API ：

在轴对象中填充了各种各样的东西，例如，你可以使用getAxes（）。xaxis.ticks来找出xaxis的刻度。 另外两个有用的属性是p2c和c2p，用于从数据点空间转换到canvas图空间和后面的函数。 两者都返回与绘图偏移量偏移的值。

结合plot.offset() （网格区域相对于文档的偏移量），您应该拥有所需的所有工具来计算其余部分。 plot.pointOffset()也很有用。 它返回相对于包含div的点的位置。

Answer 3

从理论上讲，在容器内获取x，y坐标如下：

 $(function () { $('#container').mousemove(function (e) { $('.xPos').text(e.clientX - $('#container').offset().left); $('.yPos').text(e.clientY - $('#container').offset().top); }); });