強大的純JS數據圖工具-flot
發現一個在網頁中繪制數據圖, 如曲線圖, 柱狀圖的純 JavaScript 工具:flot. 極度推薦啊! 有圖和代碼為證:
*代碼附后*
以前知道的工具有Open Flash Chart, 還有 Google 出品的Google Chart Tool. 兩者使用不同的技術, 同時也是兩種截然不同的設計理念. 相比較而言, 我更認同 Google Chart 的設計理念. 原因如下:
Open Flash Chart 使用 Flash 來做圖, 這本來也可以接受. 但是, 圖形的樣式必須通過一個 URL 返回的數據來指定, 而不是網頁端技術.
Google Chart Tool 使用 VML 來做圖, 同時實現數據和表現的分離, 是 MVC 的思想. 這樣的好處是, 同一份數據, 可以用來顯示曲線圖, 也可以顯示成柱狀圖等等.
顯而易見, Open Flash Chart 的技術和理念太陳舊了, 所以不推薦使用. 但是, Google Chart Tool 也有一個重大缺陷, 就是不能離線使用. 當網絡狀況不好時(在中國大陸經常遇到), 就沒法使用了. Google 太霸道, 也不能用.
flot 也是 Google Chart Tool 類似的理念, 所以使用起來非常方便, 而且 demo 代碼簡單修改就能運行, 學習曲線非常輕松. 而且完美支持 IE6.
附一個可以運行的 flot 例子代碼, 將下面的代碼保存成 a.html, 然后到 flot 網站下載 JavaScript 代碼, 保證路徑正確即可用瀏覽器打開看效果.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>flot</title>
<!--[if lte IE 8]>
<script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
</head>
<body>
<script type="text/javascript">
<!--
var data = [];
data.push({
"label": "中國",
"data": [[2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]]
});
$(function(){
var options = {
lines: { show: true },
points: { show: true },
xaxis: { tickDecimals: 0, tickSize: 1 }
};
var placeholder = $("#placeholder");
$.plot(placeholder, data, options);
});
//-->
</script>
<div id="placeholder" style="width:500px;height:240px"></div>
</body>
</html>
flot 項目首頁:http://code.google.com/p/flot/
補充: 再推薦另外一個非常不錯的工具 –Highcharts, 看起來功能更強大, 但還沒調研使用是否簡便.