jQuery / Flot：你如何得到数据点的坐标？ [英] jQuery/Flot: How do you get the coordinates of a datapoint?

问题描述

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

I'm currently looking at the example at http://people.iola.dk/olau/flot/examples/interacting.html but I can't figure out, how to get the coordinates of a datapoint. I won't be clicking on the Plot so I can't make use of the event plotclick. Now my question: is there another way to get the x and y coordinates of a datapoint, without clicking? I will be using the jQuery slider to highlight different points on a graph and would like to have a tooltip next to the datapoints.

提前致谢：）

推荐答案

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

Bit late on this but I ran this function after plotting the graph as a way of putting labels underneath my plotted data points in a line graph.

$(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函数，然后将它（带有一些填充）添加到图形本身的偏移量。然后它只使用正常的工具提示叠加。

This is off the top of my head but basically, this function goes through all the datapoints and uses the p2c functions in the axes, then it adds this (with some padding) to offset of the graph itself. Then it just uses the normal tooltip overlay.

另外如果在条形图上使用它，你可以设置工具提示的宽度，给它一个文本对齐的中心，然后如果你想要所有的标签都在然后只需在yaxis p2c函数中放入一个数字。然后使用图形填充将其放置在您想要的位置。

Also if using this on a bar chart you can set a width of the tooltip, give it a text align of center and then if you want all the labels to be in a line then just put a single number in the yaxis p2c function. Then use the graphy padding to position it where you want.

希望这可以帮助将来的某个人：）

Hope this helps someone in the future :)

这篇关于jQuery / Flot：你如何得到数据点的坐标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！