Как отобразить всплывающее окно с данными точки данных на графике Flot? - PullRequest
Новая
       10

Как отобразить всплывающее окно с данными точки данных на графике Flot?

2 голосов
/ 01 октября 2009

Я получил созданный Flot график. Я хотел бы получить некоторую информацию, когда пользователь наводит на нее мышь, - лучше всего было бы показать данные (с осей x и y) в некотором всплывающем окне javascript.

Это, наверное, тривиальный вопрос, но я не могу понять ...

Прямо сейчас мой javascript выглядит так: 

<script  id="source" language="javascript" type="text/javascript">
$(function () {
    var data = [[1251756000000, 122.68],[1251842400000, 122.68],[1251928800000, 125.13],[1252015200000, 112.62],[1252101600000, 122.76]]
    $.plot($("#graph_placeholder"), [ data ], { 
        xaxis: { mode: "time", minTickSize: [1, "day"], timeformat : "%y/%m/%d", },
        lines: { show: true },
        points: { show: false },
    } );
});
</script>

Так что лучше всего было бы получить x: 1251756000000 y: 122.68 при наведении курсора (x: 1251756000000, y: any ). Или даже значение x отформатировано, как определено в timeformat ( 2009/11/14 ).

1 Ответ

5 голосов
/ 28 октября 2009

В этом примере показано, как включить всплывающую подсказку (если вы установите флажок «Включить всплывающую подсказку»). Вот отправная точка, использующая ваш пример кода: 

<script  id="source" language="javascript" type="text/javascript">
$(function () {
var data = [[1251756000000, 122.68],[1251842400000, 122.68],[1251928800000, 125.13],[1252015200000, 112.62],[1252101600000, 122.76]]
$.plot($("#graph_placeholder"), [ data ], {
    xaxis: { mode: "time", minTickSize: [1, "day"], timeformat : "%y/%m/%d", },
    lines: { show: true },
    points: { show: true },
    grid: { hoverable: true },
} );
});

var previousPoint = null;
$("#graph_placeholder").bind("plothover", function (event, pos, item) {
if (item) {
    if (previousPoint != item.datapoint) {
        previousPoint = item.datapoint;
        $("#tooltip").remove();
        showTooltip(item.pageX, item.pageY, '(' + item.datapoint[0] + ', ' + item.datapoint[1]+')');
    }
} else {
    $("#tooltip").remove();
    previousPoint = null;
}
});

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);
}
</script>
...