天天看點

6款不錯的jquery畫圖插件

圖表應用能讓資料顯示更加直覺易懂,但光靠CSS+Xhtml或純圖檔實作的圖表顯然有很多局限性,強大的jquery讓我們可以實作各種很強大的圖表,下面是6款jQuery圖表插件,另外,你也許也願意看看7款線上圖表制作工具。

1,Flot

6款不錯的jquery畫圖插件

從互動性的層面來說,jQuery實作的 Flot圖表和Flash實作的圖表效果已經是非常的接近。圖表輸出效果相當的流暢光滑,注重視覺效果。你也可以和data points資料節點配合使用,當滑鼠hover到某個資料節點時,會得到對應節點的數值說明内容的回報資訊。

6款不錯的jquery畫圖插件

如上圖所示,你也可以選擇圖表的一部分内容,獲得這些特殊區域的資料;同時,你還可以對資料節點進行放大處理。

優勢: 線條、節點、區域填充、柱狀圖以及以上功能的組合。

2,Sparklines

6款不錯的jquery畫圖插件

Sparklines 是我最欣賞的微型圖表實作工具。真正實作了儀表風格的圖表樣式(登入到你的 Google Analytics 就知道什麼樣子了)。另外一個好的功用就是,可以幫助在所有的圖表插件中實作 self-refresh 的能力。

優勢: 楔形、線條、柱狀圖以及以上功能的組合。

3, Google Charts Plugin

6款不錯的jquery畫圖插件

Google Charts plugin 是通過jQuery插件将Google Charts API應用到Web程式的一個非常簡單的方式。同時,這個 API 本身也是非常的簡單易用 。允許使用簡單的jQuery調用,設定你自己需要的參數:

.attr(<span>'src'</span>, api.make(<span><strong>{</strong></span>data : [[<span>153</span>, <span>60</span>, <span>52</span>], [<span>113</span>, <span>70</span>, <span>60</span>], [<span>120</span>, <span>80</span>, <span>40</span>]]<strong>}</strong>))

優勢: 柱狀圖、重疊柱狀圖、線條、楔形、3D楔形。

4,

jQuery Chart 0.21

0.21
6款不錯的jquery畫圖插件

jQuery Chart 0.21看起來似乎并不是一個特别好看的圖表插件。實作的也是基本的功能,但它的使用卻是非常靈活、易用的。

執行個體(添加值給圖表)

.chartAdd({”label”:”Leads”,”type”:”Line”,”color”:”#008800″,”values”:["100","124","222","44","123","23","99"]})

優勢: 區塊、線條、柱狀圖以及以上功能的組合。

5,jQchart

6款不錯的jquery畫圖插件

jQchart 可以實作在圖表中的拖拽動作和動畫轉換功能。如果你的CSS應用夠好,可以實作外觀不錯的圖表效果。與其他插件相比,jQchart的實作功能似乎有些單一。

優勢: 柱狀圖、線條

6,TufteGraph

6款不錯的jquery畫圖插件

Tuftegraph 生成的柱狀圖漂亮精緻,而且可以實作層疊效果。相比Flot 的精緻小巧,Tuftegraph也可以實作自身的減壓,變得更加輕便。

優勢: 柱狀圖、重疊柱狀圖。

以上6中同樣通過jQuery實作的圖表效果,卻各有各的優勢和局限,你可以根據自身項目的需求,有選擇性地使用,我們的原則就是:簡單、實用、相容性強。

繼續閱讀