jquery.flot插件实现了数据图表显示,美中不足的是没有提供在监听后的提示。可以通过内置的监听器去添加DOM节点实现提示功能。
1.导入js文件
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
2.通过监听鼠标移动事件添加节点
// 节点提示
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 10,
left: x + 10,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#dfeffc',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
// 绑定提示事件
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var y = item.datapoint[1].toFixed(0);
var tip = "展现量:";
showTooltip(item.pageX, item.pageY,tip+y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});