отождествить пойманную точку с Флотом? - PullRequest
Новая
       40

отождествить пойманную точку с Флотом?

2 голосов
/ 05 февраля 2012

Надеюсь, этот вопрос не слишком запутанный и не длинный, я работаю с Flot примерами, в частности этим.

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

function genScatter(){
    var no = getSelectedRepeat();
    $.get("getPages.json",{rid: no},function(data){
        var d1 = [];
        $.each(data,function(i,obj){
            d1.push([obj.queries,obj.count,{url: obj.url}]);
        })
        $.plot($("#scatter"), [ { label: "Pages",
            data: d1, 
            lines:{show: false},
            points:{show: true}}],{
            xaxis:{min: 1},
            grid:{ hoverable: true}
        });
  });

}

Мой код генерирует точечную диаграмму с различными точками. При наведении курсора на точку активируется следующий слушатель ... 

$("#scatter").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
    if (item) {
        if (previousPoint != item.dataIndex) {
            previousPoint = item.dataIndex;

            $("#tooltip").remove();
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);

            /*this would be the line where I extract
             the url and forward it to showToolTip.*/
            showTooltip(item.pageX, item.pageY,
                        item.series.label  + ": " + y);
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = null;            
    }

});

где showTooltip определяется как ... 

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

По сути, при наведении курсора на точку я хотел бы отобразить значение для url, добавленное с точкой к d1, но я не смог этого сделать, поскольку объект item не возвращает url внутри item.datapoint возвращаются только значения точек x, y. url включается в item, но под item.data в массиве со всеми остальными точками на графике.

У меня вопрос: либо уникальным образом определить точку из массива, указанного в item.data, либо заставить flot включить url внутри item.datapoint, есть ли способ получить url в соответствующую точку?

1 Ответ

6 голосов
/ 05 февраля 2012

Если вы определите свою структуру данных таким образом, вы сможете получить URL-адрес в обратном вызове plothover с помощью (пример здесь ): 

item.series.data[item.dataIndex][2].url
...