[英]use jquery-tooltip with flot charts
我按照例子使用jquery工具提示。 我在畫布上顯示了標題。 我不知道如何擺脫它。 甚至當我在畫布上盤旋時我也看到了。 請看我附上的圖片
$(function() {
var $chart = $( "#placeholder" ),
ttPos = $.ui.tooltip.prototype.options.position;
$.plot(
$chart,
[{
label: "Number of users",
data:[
[ 1, 2233 ],
[ 2, 1294 ],
[ 3, 1658 ],
[ 4, 1603 ],
[ 5, 1790 ],
[ 6, 2103 ]
]
}],
{
series: {
lines: { show: true },
points: { show: true }
},
grid: {
hoverable: true
},
legend: {
show: false
}
}
);
$chart.bind( "plothover", function( e, pos, item ) {
var isTooltip = $chart.is( ":ui-tooltip" );
if ( item !== null && isTooltip === false ) {
var label = item.series.label,
data = item.datapoint[1],
content = label + "<br/><hr>" + data,
evtPos;
evtPos = $.extend( ttPos, {
of: {
pageX: item.pageX,
pageY: item.pageY,
preventDefault: $.noop
}
});
$chart.attr( "title", content )
.tooltip({position: evtPos,
content: content})
.tooltip( "open" );
}
else if ( item === null && isTooltip === true ) {
$chart.tooltip( "destroy" );
}
});
});
默認情況下,jquery ui工具提示要求彈出它的元素具有title attribute
(這就是jquery ui知道將事件綁定到哪些元素的方式)。 這段代碼的第一行:
$chart.attr( "title", content )
.tooltip({position: evtPos,
content: content})
.tooltip( "open" );
正在設置該屬性,這是您在屏幕截圖中看到的內容。
如果您將其更改為:
$chart.tooltip({position: evtPos,
content: content,
items: '*'})
.tooltip( "open" );
這應該仍然允許工具提示彈出而沒有title
文本。 在這里小提琴
說實話,我發現代碼示例非常鈍。 您可以在flot文檔中按照此示例更好地服務。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.