jQuery flot ассоциирует текст с точками графика - PullRequest
Новая
       6

jQuery flot ассоциирует текст с точками графика

4 голосов
/ 22 октября 2010

Я использую Flot и хочу связать текст с каждой отдельной точкой графика, чтобы при наведении курсора на точку графика отображались соответствующие данные.

Я использовал следующий пример

http://people.iola.dk/olau/flot/examples/interacting.html

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

Ответы [ 3 ]

2 голосов
/ 19 января 2012

Я, вероятно, отвечаю на это слишком поздно.Как я понимаю вопрос, вы пытаетесь отобразить некоторый текст о точке, отличной от координат x, y в этой точке.Я смог решить ее для себя и нашел подсказку в ссылке, которую вы дали http://people.iola.dk/olau/flot/examples/interacting.html. Если вы посмотрите на код, в функции, связанной с событием plotclick, есть эта переменная item.dataIndex: 

$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");

Эта переменная является своего рода идентификатором точки на графике.Следовательно, если я создаю массив с тремя параметрами, координатой x, координатой y и информацией, и передаю первые две координаты функции plot следующим образом: 

var data = [];
for(i=0;i<len;i++)
  data.push([obj[i][1], obj[i][0]]);
//plotting the new array "data"
var plot = $.plot($("#placeholder"), [data], options);

, где массив obj имеет вид: 

{{12, 20, "info about point 1"},{26, 30, "info about point 2"}}

тогда следующее утверждение внутри функции для функции plothover сделает эту работу за нас 

showTooltip(item.pageX, item.pageY,obj[item.dataIndex][2]);

Это сработало для меня.Надеюсь, поможет.:)

Примечание:

Вам также может быть удобно ссылаться на текст напрямую, вместо того, чтобы сохранять ссылку на массив obj: 

var myLabel = this.plot.getData()[item.seriesIndex].data[item.dataIndex][2]
showTooltip(item.pageX, item.pageY, myLabel;
0 голосов
/ 01 февраля 2013 
function redrawplot() {
   $('.tt1').remove();
   var points = plot.getData();
     var graphx = $('#placeholder').offset().left;
     graphx = graphx + 30; // replace with offset of canvas on graph
     var graphy = $('#placeholder').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 = 1; m < points[k].data.length-1; m++){
            if(points[k].data[m][0] != null && points[k].data[m][1] != null){
                  if ((points[k].data[m-1][1] < points[k].data[m][1] && points[k].data[m][1] > points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] < -50 || points[k].data[m][1] - points[k].data[m+1][1] > 50)) {
                                 showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) - 35,points[k].data[m][1], points[k].color);
              }
                              if ((points[k].data[m-1][1] > points[k].data[m][1] && points[k].data[m][1] < points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] > 50 || points[k].data[m][1] - points[k].data[m+1][1] < -50)) {
                                 showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) + 2,points[k].data[m][1], points[k].color);
                              }
                            }
        }
      }

 }

 function showTooltip1(x,y,contents, colour){
      $('<div class=tt1 id="value">' +  contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y,
            left: x,
            'border-style': 'solid',
            'border-width': '2px',
            'border-color': colour,
            'border-radius': '5px',
            'background-color': '#ffffff',
            color: '#262626',
            padding: '0px',
            opacity: '1'
      }).appendTo("body").fadeIn(200);
 }
0 голосов
/ 02 ноября 2010

Этот конкретный код показывает количество для каждой точки, плюс метку, а также значения x и y (которые, как правило, представляют собой год и сумму заработной платы, очевидно, изменяют это на то, что имеет смысл для отображения вашего графика). 

        var previousPoint = null;
    jQuery("#placeholder").bind("plotclick", function (event, pos, item) {
            jQuery("#x").text(pos.x.toFixed(0));
                 jQuery("#y").text(pos.y.toFixed(0));

                 if (item) {
                     if (previousPoint != item.datapoint) {
                         previousPoint = item.datapoint;
                                   jQuery("#tooltip").remove();
                                   var x = item.datapoint[0].toFixed(0), y = item.datapoint[1].toFixed(0);
                                   var count = findCount(item.series.label,x);
                                   showTooltip(item.pageX, item.pageY, count + " " + item.series.label + " " + x + " = $" + y);
                          }
                 }
                 else {
                     jQuery("#tooltip").remove();
                     previousPoint = null;
                 }
    });

... который дает вам позицию точки и передает ее в функцию, которая показывает всплывающую подсказку, которую вы можете определить так: 

        function showTooltip(x, y, contents) {
        jQuery('<div id="tooltip">' + contents + '</div>').css( {
                position: 'absolute',
                display: 'none',
                top: y - 35,
                left: x + 5,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#fee'
        }).appendTo("body").fadeIn(200);
    }

Я могуЯ действительно не скажу вам, почему цвет фона должен быть в кавычках, но я могу вам сказать, что это так.Очевидно, измените цвета, отступы, значение fadeIn и т. Д. В соответствии с тем, как вы хотите, чтобы все выглядело.

...