[jQuery] Javascript plotting library 畫圖 chart

沒想到 jQuery 可以做到畫圖的功能，Flot 是 Javascript plotting library for jQuery，目前支援瀏覽器：Internet Explorer 6/7/8，Firefox 2.x+，Safari 3.0+，Opera 9.5 和 Konqueror 4.x+，瀏覽器跑起來都還不錯快，唯獨 Internet Explorer 有另外寫一個 excanvas 模擬器，也就是在 IE 上面看還需要 include 另外一個 js 檔案，才可以顯示圖形，我在 google 找到一些也是 PHP Chart 的好用工具，都是國外開發的：Libchart - Simple PHP chart drawing library，XML/SWF Charts，其實還蠻多的，自己 google 就會出現一堆，不過要上去試試看。我個人還蠻喜歡 jQuery 的，所以我就推薦 Flot 這一個 jQuery 的 library，在官網上面有很多 example 的介紹，可以去看看這裡。畫最簡單的圖，還有支援 cos sin 的三角函數喔 $(function () { /* [橫座標,縱座標] Math.sin 支援三角函數 */ var d1 = []; for (var i = 0; i < 14; i += 0.5) d1.push([i, Math.cos(i)]); var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; // a null signifies separate line segments var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; $.plot($("#placeholder"), [ d1, d2, d3 ]); });[/code] 畫出來的圖如下：

也可以加上 label 標籤喔 $(function () { var d1 = []; for (var i = 0; i < 14; i += 0.5) d1.push([i, Math.cos(i)]); var d2 = [[0, 3], [4, 8], [8, 5], [9, 13], [15, 20]]; var d3 = []; for (var i = 0; i < Math.PI * 5; i += 0.25) d3.push([i, Math.sin(i)]); $.plot($("#placeholder"), [ { label: “線條一”, data: d1}, { label: “線條二”, data: d2}, { label: “線條三”, data: d3} ] ); });[/code] 圖形如下：

參考文章： flot - 用 jQuery 畫圖的 library

jQuery

See also