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

Question

我目前正在查看http://people.iola.dk/olau/flot/examples/interacting.html上的示例,但我无法弄清楚,如何获取数据点的坐标.我不会点击剧情,所以我无法使用事件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){
      $('<div id="tooltip">' +  contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y,
            left: x
      }).appendTo("body").fadeIn(200);
 } 

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

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

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

Answer 2

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

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