单位同事再看数据的时候,有一组数据是按行显示的,说看起来比较累,
于是便有了行数据曲线展示的想法,利用点击行弹出图表,没换一行都要点击 关闭一次太麻烦,单元格放图表又太小,表格也会不好看,
于是决定,制作功能:鼠标指向哪一行便显示哪一行的数据曲线,离开即关闭,奈何本人学艺不精,到处baidu,折腾了一天,便有了下图的样子:
JS代码有点乱(其实是我学艺不精),供大家参考:
setTimeout(function() {
$(function() {
x = 5;
y = 15;
$("p").hover(function(e) {
//获取当前悬浮数据参数
var chanpinbu='&chanpinbu='+$(this).attr('chanpinbu');
console.log(chanpinbu);
otitle = '<iframe src="此处替换为悬浮时要显示的曲线图url" frameborder="0" style="width:100%;height: 100%;"></iframe>';
var ndiv = "<div id='leo'>" + otitle + "</div>";
$("body").append(ndiv);
$("#leo").css({
"top" : (e.pageY + y) + "px",
"left" : (e.pageX + x) + "px"
}).show(2000);
$(this).mousemove(function(e) {
$("#leo").css({
"top" : (e.pageY + y) + "px",
"left" : (e.pageX + x) + "px"
}).show(1000);
});
}, function() {
this.title = '';
$("#leo").remove();
});
});
}, 200)
|