自定义FLOT图中的工具提示 [英] Customize tooltip in FLOT graph
问题描述
我正在使用FLOT来显示图形.
I am using FLOT to display graphs.
要显示tootip,我正在使用 https://github.com/krzysu/flot.tooltip.
To display tootip i am using https://github.com/krzysu/flot.tooltip.
现在,我想自定义工具提示的内容,因此我正在使用回调来设置工具提示的内容. 代码段:
Now I want to customize content of tooltip so I am using callback to set content of tooltip. Code snippet:
tooltip: true,
tooltipOpts: {
content: function(label, xval, yval, flotItem){
var xAxis = plot.getXAxes();
return xval;
},
defaultTheme: false
}
但是它给了我错误
caught TypeError: Object function (label, xval, yval, flotItem){
var xAxis = plot.getXAxes();
return xval;
} has no method 'replace'
有人可以帮助我吗?
谢谢.
推荐答案
我没有使用flot工具提示.有更简单的方法来显示工具提示并对其进行自定义.看看这个提琴手:
I'm not using the flot tooltip. There is easier way to show tooltip and customize it. Check out this fiddler:
http://jsfiddle.net/Margo/yKG7X/5/
$(#placeholder").bind("plothover",函数(事件,pos,项目){ 如果(项目){
$(#tooltip").remove();
$("#placeholder").bind("plothover", function (event, pos, item) { if (item) {
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1];
showTooltip(item.pageX, item.pageY, x + " / " + y );
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200).fadeOut(6000);
}
希望它会有所帮助:)
Hope it helps :)
这篇关于自定义FLOT图中的工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!