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

Из примера здесь я вроде знаю, как создать график Flot, который показывает всплывающие подсказки при наведении. Но примеры показывают только то, как отображать всплывающие подсказки, содержащие значение 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);

Теперь, когда я щелкаю по первой точке данных, я хочу, чтобы во всплывающей подсказке показывалось «Привет», а при щелчке по второй точке данных я хочу показать «Пока». Как мне это сделать? При привязке события заговора

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

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

12 голосов | спросил grautur 3 FriEurope/Moscow2010-12-03T23:59:14+03:00Europe/Moscow12bEurope/MoscowFri, 03 Dec 2010 23:59:14 +0300 2010, 23:59:14

2 ответа


0

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

Вместо

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

Вы можете

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

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

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

ответил Lasse Skindstad Ebert 1 +04002012-10-01T14:51:31+04:00312012bEurope/MoscowMon, 01 Oct 2012 14:51:31 +0400 2012, 14:51:31
0

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

Тело 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>
ответил Amol M Kulkarni 20 MaramWed, 20 Mar 2013 10:48:50 +04002013-03-20T10:48:50+04:0010 2013, 10:48:50

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132