jQuery / Flot: Как вы получаете координаты точки данных? - PullRequest
Новая
       18

jQuery / Flot: Как вы получаете координаты точки данных?

6 голосов
/ 03 июня 2010

В настоящее время я смотрю на пример на http://people.iola.dk/olau/flot/examples/interacting.html, но не могу понять, как получить координаты точки данных. Я не буду нажимать на график, поэтому не могу использовать событие plotclick. Теперь мой вопрос: есть ли другой способ получить координаты x и y точки данных без щелчка? Я буду использовать ползунок jQuery для выделения различных точек на графике и хотел бы иметь всплывающую подсказку рядом с точками данных.

Заранее спасибо:)

Ответы [ 3 ]

6 голосов
/ 14 июня 2011

С опозданием, но я запустил эту функцию после того, как построил график как способ размещения меток под точками графиков, нанесенными на график. 

$(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 голосов
/ 03 августа 2010

Из API flot :

Различные вещи набиты внутри осевой объект, например вы могли бы использовать getAxes (). xaxis.ticks, чтобы узнать, что Клещи для Xaxis. Два других полезные атрибуты - p2c и c2p, функции для преобразования из данных Точка пространства на пространстве сюжета холста и назад. Оба возвращают значения, которые смещение с учетом смещения.

В сочетании с plot.offset() (смещение области сетки относительно документа) у вас должны быть все инструменты, необходимые для выяснения остальных. plot.pointOffset() также полезно. Возвращает положение точки относительно содержащего элемента div.

0 голосов
/ 03 июня 2010

Теоретически получение координат x, y внутри контейнера выглядит следующим образом: 

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