欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

[p]隨著jquery、mootools、prototype等知名的javascript框架的應用變的越來越強大，瀏覽器對最新版本css屬性的支持，除去頁面中flash的應用之外，圖表應用變的越來越廣泛實用。本文為你整理了6個實用性強的jquery圖表插件，概述了它們各自的功用和優勢。[/p]
[p][/p]
1，[url=http://code.google.com/p/flot/]flot[/url]
[p][align=center][url=http://code.google.com/p/flot/][img]http://bbon.cn/wp-content/uploads/2009/03/08200312t.png[/img][/url][/align][/p]
[p]從交互性的層面來說，jquery實現的 [url=http://code.google.com/p/flot/]flot[/url]圖表和flash實現的圖表效果已經是非常的接近。圖表輸出效果相當的流暢光滑，注重視覺效果。你也可以和data points數據節點配合使用，當鼠標hover到某個數據節點時，會得到對應節點的數值說明內容的反饋信息。[/p]
[p][align=center][url=http://people.iola.dk/olau/flot/examples/zooming.html][img]http://bbon.cn/wp-content/uploads/2009/03/08200389f.png[/img][/url][/align][/p]
[p]如上圖所示，你也可以選擇圖表的一部分內容，獲得這些特殊區域的數據；同時，你還可以對數據節點進行放大處理。[/p]
[p][b]優勢: [/b]線條、節點、區域填充、柱狀圖以及以上功能的組合。[/p]
2，[url=http://omnipotent.net/jquery.sparkline/]sparklines[/url]
[p][align=center][url=http://omnipotent.net/jquery.sparkline/][img]http://bbon.cn/wp-content/uploads/2009/03/0820033ld.png[/img][/url][/align][/p]
[p][url=http://omnipotent.net/jquery.sparkline/]sparklines[/url] 是我最欣賞的微型圖表實現工具。真正實現了儀表風格的圖表樣式（登錄到你的 google analytics 就知道什么樣子了)。另外一個好的功用就是，可以幫助在所有的圖表插件中實現 self-refresh 的能力。[/p]
[p][b][b]優勢[/b]:[/b] 楔形、線條、柱狀圖以及以上功能的組合。[/p]
3， [url=http://maxb.net/scripts/jgcharts/include/demo/#1]google charts plugin[/url]
[p][align=center][url=http://maxb.net/scripts/jgcharts/include/demo/#1][img]http://bbon.cn/wp-content/uploads/2009/03/082003k28.png[/img][/url][/align][/p]
[p][url=http://maxb.net/scripts/jgcharts/include/demo/#1]google charts plugin[/url] 是通過jquery插件將[url=http://code.google.com/apis/chart/]google charts api[/url]應用到web程序的一個非常簡單的方式。同時，這個 api 本身也是非常的簡單易用 。允許使用簡單的jquery調用，設置你自己需要的參數：[/p]
.attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]}))
[p][b][b]優勢[/b]:[/b] 柱狀圖、重疊柱狀圖、線條、楔形、3d楔形。[/p]
4，
[p][url=http://reach1to1.com/sandbox/jquery/jqchart/]jquery chart 0.21[/url][/p]
0.21
[p][align=center][url=http://reach1to1.com/sandbox/jquery/jqchart/][img]http://bbon.cn/wp-content/uploads/2009/03/082003c1z.png[/img][/url][/align][/p]
[p][url=http://reach1to1.com/sandbox/jquery/jqchart/]jquery chart 0.21[/url]看起來似乎并不是一個特別好看的圖表插件。實現的也是基本的功能，但它的使用卻是非常靈活、易用的。[/p]
[p][b]實例[/b]（添加值給圖表）[/p]
[p].chartadd({”label”:”leads”,”type”:”line”,”color”:”#008800″,”values”:["100","124","222","44","123","23","99"]})[/p]
[p][b]優勢:[/b] 區塊、線條、柱狀圖以及以上功能的組合。[/p]
5，[url=http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/test-use-gradient.html]jqchart[/url]
[p][align=center][url=http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/test-use-gradient.html][img]http://bbon.cn/wp-content/uploads/2009/03/082003zyc.png[/img][/url][/align][/p]
[p][url=http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/test-use-gradient.html]jqchart[/url] 可以實現在圖表中的拖拽動作和動畫轉換功能。如果你的css應用夠好，可以實現外觀不錯的圖表效果。與其他插件相比，jqchart的實現功能似乎有些單一。[/p]
[p][b]優勢:[/b] 柱狀圖、線條[/p]
6，[url=http://xaviershay.github.com/tufte-graph/]tuftegraph[/url]
[p][align=center][url=http://xaviershay.github.com/tufte-graph/][img]http://bbon.cn/wp-content/uploads/2009/03/082003h0n.png[/img][/url][/align][/p]
[p][url=http://xaviershay.github.com/tufte-graph/]tuftegraph[/url] 生成的柱狀圖漂亮精致，而且可以實現層疊效果。相比[url=http://code.google.com/p/flot/]flot[/url] 的精致小巧，[url=http://xaviershay.github.com/tufte-graph/]tuftegraph[/url]也可以實現自身的減壓，變得更加輕便。[/p]
[p][b]優勢:[/b] 柱狀圖、重疊柱狀圖。[/p]
[p]以上6中同樣通過jquery實現的圖表效果，卻各有各的優勢和局限，你可以根據自身項目的需求，有選擇性地使用，我們的原則就是：簡單、實用、兼容性強。[/p]
[p]英文：[url=http://reynoldsftw.com/2009/02/6-jquery-chart-plugins-reviewed/]6 jquery chart plugins for your app[/url][/p]
[p][url=http://bbon.cn/2009/03/6%e4%b8%aajquery%e5%9b%be%e8%a1%a8%e5%ba%94%e7%94%a8%e6%89%a9%e5%b1%95.html]http://bbon.cn/2009/03/6%e4%b8%aajquery%e5%9b%be%e8%a1%a8%e5%ba%94%e7%94%a8%e6%89%a9%e5%b1%95.html[/url][/p]