Любые примеры флота с плавающими всплывающими подсказками?

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

API предполагает, что есть способы установить на диаграмме hoverable, а не то, что я уверен, что именно это означает, что я могу с этим справиться.

Я хотел бы знать, могут ли кто-нибудь поделиться некоторыми примерами, с которыми они столкнулись, или кодом в этом отношении, которые демонстрируют примеры любого из следующего:

  • Динамические всплывающие подсказки, вызванные зависанием событий на элементах карты флота
  • Отметьте подсказки (наведите указатель мыши на изображение xaxis)
  • Любой тип привязки/динамического привязки событий, который был использован w Flot

Эффект, который я ищу, похож на this Открыть пример флэш-карты

Ответы

Ответ 1

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

Ответ 2

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

И я также добавлю некоторые функции в плагин, вы можете найти его на github. https://github.com/skeleton9/flot.tooltip

Ответ 3

http://data.worldbank.org построен с использованием флота и использует всплывающие подсказки.

Ответ 4

Ссылка в ответе Саймона работала очень хорошо, чтобы обеспечить крючок для использования с плавающими всплывающими подсказками. Тем не менее, я обнаружил, что мне нужно копать и вырезать код, чтобы выполнить зависание. Вот результат (в основном дословно из http://people.iola.dk/olau/flot/examples/interacting.html).

Единственный параметр, который необходимо изменить при инициализации флота, находится в объекте параметров. Он должен включать это как один из вариантов:

var options = {
 //... : {},
 grid: { hoverable: true }
};

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

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'
        }).appendTo("body").fadeIn(200);
    }

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

    var previousPoint = null;
    $("#flotPlaceHolder").bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

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

                showTooltip(item.pageX, item.pageY, "(" + x + "," + y + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });