отображение пользовательской подсказки при наведении курсора мыши на точку в 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. */ };
Я не уверен, что такое "элемент" и как к нему присоединить данные.
3 ответов:
Вот пример грубогоJSFiddle , который я поднял. Не уверен, что он работает именно так, как вам нравится, но может зажечь идею...
[обновление]
Вы захотите привязаться к
$("#placeholder").bind("plotclick", function (event, pos, item) {/* code */});Событие для щелчка события
[update2] обновленный пример
Я скорректировал пример, чтобы использовать ваши тестовые данные и работать больше с тем, что вы описали выше. Что касается объектаitem, то он, по-видимому, генерируется на лету так, что из того, что я могу сказать, вы не можете добавить к нему дополнительные данные. Однако можно создать массив для кэширования объектовitemпри щелчке мышью, добавить к ним дополнительные данные и использовать их для событияhover.Этот новый пример делает именно это, он показывает обычную подсказку, когда ничего не нажато. но после нажатия он определяет, была ли выбранная точка первой или второй, и добавляет свойство addition к объекту
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:Пожалуйста, дайте мне знать, если что-то из этого полезно или нет, если нет, я заткнусь и перестану обновлять свой ответ: Pitem : { alternateText: 'hello', dataIndex: 0, datapoint: [ 1290802154, 0.3 ], pageX: 38, pageY: 82, series: {/* properties of the series that this point is in */}, seriesIndex: 0 }
Вы можете добавить данные в ряд, просто добавив их в массив данных.
Вместо
$.plot(element, [[1, 2], [2, 4]] ...)Вы можете
$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...)И затем используйте эту информацию для отображения пользовательской метки.
Смотрите эту скрипку для полного примера: http://jsfiddle.net/UtcBK/328/
Также вы можете попробовать следующий код:
Html body:
<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>
Comments