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

Из примера здесь я примерно знаю, как создать график 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);

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

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

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


javascript flot
person grautur    schedule 03.12.2010    source источник

Ответы (3)


arrow_upward
8
arrow_downward

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

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

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

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

событие для кликов по событиям

[update2] Обновленный пример

Я скорректировал пример, чтобы использовать ваши тестовые данные и больше работать с тем, что вы описали выше. Что касается объекта 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

person subhaze    schedule 03.12.2010
comment
и вот обновление, которое полностью перезаписывает данные во всплывающей подсказке: jsfiddle.net/subhaze/UtcBK /3 - person subhaze; 04.12.2010

arrow_upward
15
arrow_downward

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

Вместо

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

Ты сможешь

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

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

Полный пример см. в этой скрипте: http://jsfiddle.net/UtcBK/328/

$(function() {
  var sin = [],
    cos = [];
  for (var i = 0; i < 14; i += 0.5) {
    sin.push([i, Math.sin(i), 'some custom label ' + i]);
    cos.push([i, Math.cos(i), 'another custom label ' + i]);
  }

  var plot = $.plot($("#placeholder"), [{
      data: sin,
      label: "sin(x)"
    },
    {
      data: cos,
      label: "cos(x)"
    }
  ], {
    series: {
      lines: {
        show: true
      },
      points: {
        show: true
      }
    },
    grid: {
      hoverable: true,
      clickable: true
    },
    yaxis: {
      min: -1.2,
      max: 1.2
    }
  });

  $("#placeholder").bind("plothover", function(event, pos, item) {
    $("#tooltip").remove();
    if (item) {
      var tooltip = item.series.data[item.dataIndex][2];

      $('<div id="tooltip">' + tooltip + '</div>')
        .css({
          position: 'absolute',
          display: 'none',
          top: item.pageY + 5,
          left: item.pageX + 5,
          border: '1px solid #fdd',
          padding: '2px',
          'background-color': '#fee',
          opacity: 0.80
        })
        .appendTo("body").fadeIn(200);


      showTooltip(item.pageX, item.pageY, tooltip);
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="placeholder" style="width:600px;height:300px"></div>

person Lasse Skindstad Ebert    schedule 01.10.2012

arrow_upward
4
arrow_downward

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

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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="content">
  <div class="demo-container">
    <div id="placeholder" class="demo-placeholder"  style="width:800px;height:600px;"></div>
  </div>
</div>

person Amol M Kulkarni    schedule 20.03.2013