Отображение пользовательской подсказки при наведении курсора на точку в лотке
Из примера здесь, я как бы знаю, как создать график флота, который показывает всплывающие подсказки при зависании. Но примеры только показывают, как отображать всплывающие подсказки, содержащие значение 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);
Теперь, когда вы нажимаете на первый datapoint, я хочу, чтобы всплывающая подсказка показывала "Hello", а при нажатии на второй datapoint я хочу показать "Bye". Как мне это сделать? При привязке события plothover
$(".placeholder").bind("plothover", function (event, pos, item) { /* etc. */ };
Я не уверен, что означает "item", и как прикрепить к нему данные.
Ответы
Ответ 1
Вот пример 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
Ответ 2
Вы можете добавить данные в серию, просто добавив их в массив данных.
Вместо
$.plot(element, [[1, 2], [2, 4]] ...)
Вы можете
$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...)
И затем используйте эту информацию, чтобы показать пользовательскую метку.
Смотрите эту скрипку для полного примера:
http://jsfiddle.net/UtcBK/328/
Ответ 3
Также вы можете попробовать следующий код:
Тело HTML:
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
</div>
Script:
<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>
