jQuery/Flot: How do you get the coordinates of a datapoint?

问题

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.

Thanks in advance :)

回答1:

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

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.

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 :)

回答2:

From the flot API:

Various things are stuffed inside an axis object, e.g. you could use getAxes().xaxis.ticks to find out what the ticks are for the xaxis. Two other useful attributes are p2c and c2p, functions for transforming from data point space to the canvas plot space and back. Both returns values that are offset with the plot offset.

Combined with plot.offset() (the offset of the grid area relative to the document), you should have all the tools you need to figure out the rest. plot.pointOffset() is also useful. It returns the position of a point relative to the containing div.

回答3:

Theoretically getting x,y coordinates inside a container is as follows:

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

来源：https://stackoverflow.com/questions/2964798/jquery-flot-how-do-you-get-the-coordinates-of-a-datapoint