作者 主題: [教學] [jQuery] Javascript plotting library 畫圖 chart  (閱讀 6643 次)

0 會員 與 1 訪客 正在閱讀本文。

appleboy

  • 活潑的大學生
  • ***
  • 文章數: 224
    • 檢視個人資料
    • 小惡魔筆記

原文:[jQuery] Javascript plotting library 畫圖 chart

沒想到 jQuery 可以做到畫圖的功能,Flot是 Javascript plotting library for jQuery,目前支援瀏覽器:Internet Explorer6/7/8,Firefox 2.x+,Safari 3.0+,Opera 9.5 和 Konqueror4.x+,瀏覽器跑起來都還不錯快,唯獨 Internet Explorer 有另外寫一個 excanvas 模擬器,也就是在 IE上面看還需要 include 另外一個 js 檔案,才可以顯示圖形,我在 google 找到一些也是 PHP Chart的好用工具,都是國外開發的:Libchart - Simple PHP chart drawing libraryXML/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 ]);

});
畫出來的圖如下:


也可以加上 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}
    ]   
    );
});


原文:[jQuery] Javascript plotting library 畫圖 chart

歡迎來到 CodeIgniter 繁體中文討論區
My Blog:小惡魔 - 電腦技術 - 生活日記 - 美食介紹 - AppleBOY

TyroneYeh

  • 俺是博士!
  • *****
  • 文章數: 2396
  • 性別: 男
    • 檢視個人資料
現在畫 Chart 有很多種元件可以用!
小弟用過 Libchart & PHP XML/SWF Charts & Open Flash Chart 還有 amcharts
還沒用過 jQuery 上的 chart! 去看了一下 jQuery 的 chart 後,覺得會頓頓的!

目前用的是 amcharts ,它是用 flash 做前端顯示,架構上算是很完整,速度上也不錯!
可以到 http://amcharts.com/ 看看官網的範例!

看看有沒有人有需要! 參考參考!
--
TyroneYeh

micmic3

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
我用open source flash chart
因為 V2 beta 1 可以用 flex or flashdevelop 直接改