jQuery/Flot：如何获取数据点的坐标？答案

【问题标题】：jQuery/Flot: How do you get the coordinates of a datapoint?jQuery/Flot：如何获取数据点的坐标？
【发布时间】：2010-06-03 09:54:24
【问题描述】：

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

提前致谢:)

【问题讨论】：

标签： javascript jquery flot

【解决方案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){
      $('<div id="tooltip">' +  contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y,
            left: x
      }).appendTo("body").fadeIn(200);
 }

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

此外，如果在条形图上使用它，您可以设置工具提示的宽度，给它一个居中对齐的文本，然后如果您希望所有标签都排成一行，那么只需在 yaxis p2c 中输入一个数字功能。然后使用图形填充将其放置在您想要的位置。

希望这对将来的人有所帮助:)

【讨论】：

【解决方案2】：

来自flot API：

各种各样的东西都塞进了一个轴对象，例如你可以使用 getAxes().xaxis.ticks 找出什么刻度线用于 xaxis。 另外两个有用的属性是 p2c 和 c2p，从数据转换的函数点空间到画布绘图空间然后回来。两者都返回值与绘图偏移量的偏移量。

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

【讨论】：

反过来呢？如果我有 x 偏移量，Flot 可以提供数据值吗？

【解决方案3】：

理论上获取容器内的x,y坐标如下：

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

【讨论】：