Есть какие-нибудь примеры Flot с плавающими всплывающими подсказками?

Question

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

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

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

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

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

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);
    }

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

    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;
        }
    });

Answer 5

Ознакомьтесь с этой библиотекой для получения всплывающих подсказок и интеграции flot

https://github.com/krzysu/flot.tooltip

Answer 6

http://craigsworks.com/projects/qtip2/demos/#flot это моя любимая библиотека всплывающих подсказок JS.Он довольно крутой и имеет интеграцию с flot.

Answer 7

Вы можете добавить пользовательские данные в массив данных и использовать их для отображения всплывающих подсказок.

Смотрите мой ответ и полный пример здесь:отображение пользовательской всплывающей подсказки при наведении курсора мыши на точку в flot