FlotJS工具提示干扰了响应性
FlotJS tooltip messing with the responsiveness?
我正在开发一个应用程序,在这个应用程序中,我使用FlotJS图表库来绘制图形,并且我已经打开了工具提示,以便用户可以将鼠标悬停在点上,并可以在特定日期告诉每个点的内容。
就像在这个交互式图形示例中一样,我们可以将鼠标悬停在这些点上以查看sin和cos的值。
我在我的项目中使用了Smart Admin Responsive Theme,如果你导航到他们提供的图形演示,还有一个关于flotchart演示的部分
如果你仔细观察排名第二的Sin图,它和我正在做的很相似。将鼠标悬停在这些点上,将显示工具提示以查看sin的值。
我面临的问题是,如果你把鼠标悬停在最后几个点上,工具提示出现了,但它扰乱了页面的响应性,而且每次都不可见。
如何解决这个问题?当鼠标指针位于页面末端时,是否有某种方法可以使工具提示显示在鼠标指针的左侧?
编辑
<选项对象/strong>
var layerOptions = {
xaxis : {
mode : "time"
},
legend : {
show : true,
noColumns : 1, // number of colums in legend table
labelFormatter : null, // fn: string -> string
labelBoxBorderColor : "#000", // border color for the little label boxes
container : null, // container (as jQuery object) to put legend in, null means default on top of graph
position : "ne", // position of default legend container within plot
margin : [0, 5], // distance from grid edge to default legend container within plot
backgroundColor : "#efefef", // null means auto-detect
backgroundOpacity : 0.4 // set to 0 to avoid background
},
tooltip : true,
tooltipOpts : {
content : "<b>%s</b> content on <b>%x</b> was <b>%y</b>",
dateFormat : "%y-%m-%d",
defaultTheme : false
},
grid : {
hoverable : true,
clickable : true
},
series: {
/*bars: {
show: true,
barWidth: 1000 * 60 * 60 * 24 * 30,
order: 1
}*/
}
};
是的,您可以根据窗口大小动态设置工具提示的位置。我在我的一个fllot页面中使用了这个方法,当工具提示靠近右边框时将其向左翻转:
var prevPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (prevPoint != item.dataIndex) {
prevPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2),
text = item.series.label + ' content on ' + x + ' was ' + y;
showTooltip(item.pageX, item.pageY, text);
}
} else {
$("#tooltip").remove();
prevPoint = null;
}
});
function showTooltip(x, y, content) {
var cssParams = {
position: 'absolute',
display: 'none',
border: '1px solid #888888',
padding: '2px',
'background-color': '#eeeeee',
opacity: 0.8
};
if (x < 0.8 * windowWidth) {
cssParams.left = x + 3;
}
else {
cssParams.right = windowWidth - x + 6;
}
if (y < 0.8 * windowHeight) {
cssParams.top = y + 3;
}
else {
cssParams.bottom = windowHeight - y + 6;
}
$('<div id="tooltip">' + content + '</div>').css(cssParams).appendTo('body').fadeIn(100);
}
windowHeight
和windowWidth
是在resize事件(使用$(window).height()
)中更新的全局变量。如果愿意,也可以使用容器元素的尺寸。
当你使用给定的事件/函数时,你可以删除工具提示插件和选项。
相关文章:
- 多个单选按钮组相互干扰
- 如何将getJson的响应保存在全局变量中
- 如何使用Spring MVC将Facebook返回的响应数据保存在Java类中
- 使用angularjs向浏览器发送servlet响应(下载功能)
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- 不再使用innerHTML进行AJAX响应.(代码未得到响应)
- 为什么可以't我使用了AJAX响应的一部分
- 响应动画手风琴不工作
- 如何从SeleniumWebdriver获取异步Javascript响应
- Ajax调用在Firefox中不会自动响应
- 可以在响应时隐藏iphone上的“播放”按钮以进行视频播放
- 由于响应中不存在“Access Control Allow Origin”标头,跨域请求停止工作
- 如何在 JavaScript 和 HTML 中更改对输入框的提示响应
- IIS动态HTTP响应标头
- 预期响应包含一个对象,但在angular js中得到一个数组错误
- Ajax响应转换
- 使Intro.js工具提示响应
- ajax响应后,HTML结构受到干扰
- FlotJS工具提示干扰了响应性
- 错误:Can't设置发送后的标头.RabbitMQ干扰NodeJS响应