Posted on 2012-03-23 16:14
zljpp 閱讀(461)
評論(0) 編輯 收藏
首先對Flot做簡單介紹：
flot 是一個基于jquery的開源javascript庫,是一個純粹的 jQuery JavaScript 繪圖庫，可以在客戶端即時生成圖形，使用非常簡單，支持放大縮小以及鼠標追蹤等交互功能。該插件支持 IE6/7/8/9, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas 對象(html5中新增的對象)，目前所有主流瀏覽器都支持該對象， IE8以下等不支持的瀏覽器, 使用 JavaScript 進行模擬。
由于瀏覽器的支持問題，我們在做頁面時一共需要三個頁面，JQuery庫、Flot庫、excanvas.js這三個文件。
做出后效果如下，這個例子是對官方例子的簡單修改而成的，增加了一些注釋。
?
我們來看一下代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Flot曲線圖</title>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript">
$(function () {
var sin = [], cos = [];
// 初始化數據
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
var plot = $.plot(
$("#placeholder"),
[ { data: sin, label: "sin函數"}, { data: cos, label: "cos函數" } ], // 數據和右上角含義的提示
{
series: {
lines: { show: true }, // 點之間是否連線
points: { show: true } // 是否顯示點
},
grid: { hoverable: true, clickable: true }, // 是否可以懸浮，是否可以點擊
yaxis: { min: -1.2, max: 1.2 }, // Y 軸 的最大值和最小值
xaxis: { min: 0, max: 15 } // X 軸 的最大值和最小值
});
var previousPoint = null;
// 邦定事件
$("#placeholder").bind("plothover", function (event, pos, item) {
if ($("#enableTooltip:checked").length > 0) { // 如果允許提示
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY,
"X:" + x + " Y:" + y);
//item.series.label + " of " + x + " = " + y); // 懸浮點時提示的內容
}
}else {
$("#tooltip").remove();
previousPoint = null;
}
}
});
// 懸浮點時進行提示
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);
}
});
</script>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px"></div>
<p><input id="enableTooltip" type="checkbox">Enable tooltip</p>
</body>
</html>
?
以上我們初始化一些數據， 然后進行設置，其中可以設置是否能夠提示！
示例簡單，希望能夠幫助一些人吧，最后示例需要的文件和示例頁面如下。
歡迎大家支持我的博客：http://cuisuqiang.iteye.com/?！