отображение всплывающей подсказки при наведении курсора на точку в флот

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

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

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

var d = [ { label: "Fake!", data: [ [1290802154, 0.3], [1292502155, 0.1] ] } ];
var options = {
    xaxis: { mode: "time" },
    series: {
    lines: { show: true },
        points: { show: true }
    },
    grid: { hoverable: true, clickable: true }
};
$.plot($("#placeholder"), d, options);

теперь, при нажатии на первую точку данных, я хочу, чтобы всплывающая подсказка показывала "Привет", а при нажатии на вторую точку данных я хочу показать"пока". Как мне это сделать? При привязке события plothover

$(".placeholder").bind("plothover", function (event, pos, item) { /* etc. */ };

Я не уверен, что означает "элемент", и как прикрепить к нему данные.

12
flot javascript

3 ответов

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

[обновление]

вы захотите привязать к

$("#placeholder").bind("plotclick", function (event, pos, item) {/* code */});

событие для нажатия события

[обновление 2] Обновленный Пример

я изменил пример, чтобы использовать ваши тестовые данные и работать с тем, что у вас есть описанный выше. Что касается item объект кажется, что он генерируется на лету, поэтому, из того, что я могу сказать, вы не можете добавить к нему дополнительные данные. Однако вы можете создать массив для кэширования item объекты при нажатии и добавить дополнительные сведения к ним и использовать их для hover событие.

этот новый пример делает именно это, он показывает обычную подсказку, когда ничего не нажата. но после нажатия он определяет, была ли точка нажата первой или второй, и добавляет дополнение имущество item объект alternateText и сохраняет его в массиве itemsClicked.

теперь, когда точка зависла над ней, она проверяет, есть ли кэшированный item объект в массиве на основе того же индекса текущего item объект, который получается через item.dataIndex. Если в массиве кэша имеется соответствующий индекс itemsClicked он схватит item объект и использовать alternateText свойство, которое было добавлено во время click событие ранее.

первый пункт item "объект" будет выглядеть примерно так:

item : {
    dataIndex: 0,
    datapoint: [
        1290802154,
        0.3
    ],
    pageX: 38,
    pageY: 82,
    series: {/* properties of the series that this point is in */},
    seriesIndex: 0
}

после нажатия он будет выглядеть так и будет храниться в itemsClicked время:

item : {
    alternateText: 'hello',
    dataIndex: 0,
    datapoint: [
        1290802154,
        0.3
    ],
    pageX: 38,
    pageY: 82,
    series: {/* properties of the series that this point is in */},
    seriesIndex: 0
}

пожалуйста, дайте мне знать, если что-то из этого полезно или нет, если нет, я заткнусь и перестану обновлять свой ответ :P

8

вы можете добавить данные в ряд, просто добавив его в массив данных.

вместо

$.plot(element, [[1, 2], [2, 4]] ...)

Вы можете

$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...)

и затем используйте эту информацию для отображения пользовательской метки.

см. эту скрипку для полного примера: http://jsfiddle.net/UtcBK/328/

13

Также вы можете попробовать следующий код:

текста HTML:

<div id="content">
    <div class="demo-container">
        <div id="placeholder" class="demo-placeholder"></div>
    </div>
</div>

сценарий:

<script type="text/javascript">
    function showTooltip(x, y, contents, z) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y - 30,
            left: x - 110,
            'font-weight':'bold',
            border: '1px solid rgb(255, 221, 221)',
            padding: '2px',
            'background-color': z,
            opacity: '0.8'
     }).appendTo("body").show();
     };

    $(document).ready(
                 $(function () {
                     var data = [{
                         "label": "scott",
                         "data": [[1317427200000 - 5000000 * 3, "17017"], [1317513600000 - 5000000 * 5, "77260"]]
                     },
        {
            "label": "martin",
            "data": [[1317427200000 - 5000000 * 2, "96113"], [1317513600000 - 5000000 * 4, "33407"]]
        },
        {
            "label": "solonio",
            "data": [[1317427200000 - 5000000, "13041"], [1317513600000 - 5000000 * 3, "82943"]]
        },
        {
            "label": "swarowsky",
            "data": [[1317427200000, "83479"], [1317513600000 - 5000000 * 2, "96357"], [1317600000000 - 5000000, "55431"]]
        },
        {
            "label": "elvis",
            "data": [[1317427200000 + 5000000, "40114"], [1317513600000 - 5000000 * 1, "47065"]]
        },
        {
            "label": "alan",
            "data": [[1317427200000 + 5000000 * 2, "82504"], [1317513600000, "46577"]]
        },
        {
            "label": "tony",
            "data": [[1317513600000 + 5000000, "88967"]]
        },
        {
            "label": "bill",
            "data": [[1317513600000 + 5000000 * 2, "60187"], [1317600000000, "39090"]]
        },
        {
            "label": "tim",
            "data": [[1317513600000 + 5000000 * 3, "95382"], [1317600000000 + 5000000, "89699"]]
        },
        {
            "label": "britney",
            "data": [[1317513600000 + 5000000 * 4, "76772"]]
        },
        {
            "label": "logan",
            "data": [[1317513600000 + 5000000 * 5, "88674"]]
        }];

                     var options = {
                         series: {
                             bars: {
                                 show: true,
                                 barWidth: 60 * 60 * 1000,
                                 align: 'center'
                             }
                         },
                         points: {
                             show: true
                         },
                         lines: {
                             show: true
                         },
                         grid: { hoverable: true, clickable: true },
                         yaxes: {
                             min: 0
                         },
                         xaxis: {
                             mode: 'time',
                             timeformat: "%b %d",
                             minTickSize: [1, "month"],
                             tickSize: [1, "day"],
                             autoscaleMargin: .10
                         }
                     };

                     $(function () {
                         $.plot($('#placeholder'), data, options);
                     });
                     $(function () {
                         var previousPoint = null;
                         $("#placeholder").bind("plothover", function (event, pos, item) {
                             if (item) {
                                 if (previousPoint != item.datapoint) {
                                     previousPoint = item.datapoint;

                                     $("#tooltip").remove();
                                     var x = item.datapoint[0],
                    y = item.datapoint[1] - item.datapoint[2];
                                     debugger;
                                     showTooltip(item.pageX, item.pageY, y + " " + item.series.label, item.series.color);
                                 }
                             }
                             else {
                                 $("#tooltip").remove();
                                 previousPoint = null;
                             }
                         })
                     });
                 })
                 );
</script>
3