[轉]一些實用的圖表Chart製做工具

最近工做過程當中須要用到前端一些JS框架，看到一篇博文就轉過來備份使用，後續會再完善一些材料。

 

Flot

 

Flot一個純javascript繪畫庫，基於jQuery開發。它可以在客戶端根據任何數據集快速生成圖片。目前只能繪製線狀圖和柱狀。

 

JQchart

 

基於Canvas+jQuery，可拖放/交互的簡單圖形控件。

 

Open Flash Chart

Open Flash Chart是一個開源的Flash製圖組件。

 

PlotKit

PlotKit是一個純javascript繪圖工具包。它支持HTML Canvas和Adobe SVG。

 

XML SWF Charts

XML SWF Charts是一個簡單，但強大，利用Flash和動態生成XML數據來產生web chart的工具。當前支持的Charts類型包括：

• Line
• Column
• Stacked column
• Floating column
• 3D column
• Stacked 3D column
• Parallel 3D column
• Pie
• 3D Pie
• Bar
• Stacked bar
• Floating bar
• Area
• Stacked area
• Candlestick
• Scatter
• Polar
• Mixed
• Composite
• Joined

 

jquery.sparkline 

這是一個用於生成迷你型線狀圖的jQuery插件。

 

 

Flotr

Flotr是一個基於Prototype開發的javascript繪圖工具。支持圖例，鼠標跟蹤，圖片區域選擇，圖片縮放，添加事件鉤子（event hook），經過CSS設置樣式等。

 

Open Flash Chart2

Open Flash Chart2是依據Open Flash Chart1.x徹底從新構建的一個Flash圖表繪製組件。與1.x版本最大不一樣之處在於把數據格式改爲JSON，以實現一些更酷的功能。該版本所有采用Actionscript3開發,Adobe Flex編譯。

 

ProtoChart

ProtoChart是一個採用Prototype和Canvas開發的圖表製做開源javascript工具包。當前支持的圖表類型包括：

• Line、bar、pie、curve、mix和area charts
• 在同一張圖中支持多個數據數據序列
• 支持Legend標籤
• 可以自定義網格，網格邊線，背景
• 自定義座標軸標題（包括x軸與y軸）

 

 

Visifire

Visifire是一組開源的Microsoft Silverlight圖表製做組件。 Visifire讓你利用ASP、ASP.Net、PHP、JSP、ColdFusion、Ruby on Rails或是隻有HTML都能快速製做出「驚人」的圖表（Charts）。不須要懂得任何Silverlight知識，只要具有基礎的HTML知識，就可以使用該強大的Silverlight圖表製做組件。

 

 

 CSS for Bar Graphs

 

用XHTML+CSS實現各類柱狀圖（Bar Graph）的示例。

 

 

FusionCharts Free

FusionCharts Free是一個製圖組件用於建立好看，數據驅動，擁有動畫效果的Flash charts。它可以與PHP、Python、Ruby on Rails、ASP、ASP.NET、JSP、ColdFusion、HTML頁面等一塊兒使用。這個組件是FusionCharts的免費版，但功能仍然很強大。它可以生成的圖表類型包括：

• 2D/3D column & bar charts
• 2D/3D pie & doughnut charts
• Line charts
• Area charts
• Stacked charts
• Gantt charts

 

 

 

JS Charts

JS Charts是一個JavaScript製圖組件。支持的圖表類型包括：柱狀圖，圓餅圖，曲線圖等。JS Charts支持的數據源能夠是XML或JavaScript數組。

 

MooCSSCharts 

基於Mootools+CSS實現，擁有動畫效果的柱狀圖（BarCharts）。

 

 

jQuery Google Charts

jQuery Google Charts是一個封裝Google API charts的jQuery插件，提供了更加簡易的使用方法。

 

Axiis

Axiis是一個基於Degrafa，Flex&ActionScript3.0開發的開源數據圖表組件。

 

jqPlot是一個jQuery繪圖插件，能夠利用它製做漂亮的線狀圖和柱狀圖。jqPlot支持爲圖表設置各類不一樣的樣式。提供Tooltips，數據點高亮顯示等功能。

 

 

Visualize是一個利用HTML5 Canvas將Tables標籤轉換成圖表的jQuery插件。支持的圖表類型包括：線狀圖，柱狀圖，餅狀圖。能夠設置圖表標題，高度/寬度，顏色等。

 

 

 

MilkChart是一個易於使用、強大，基於MooTools開發的製圖工具。它使用HTML5<canvas>標籤。支持的圖表類型包括：

• Column
• Bar
• Line
• Scatter
• Pie

 

 

Raphaël是一個可以在網頁上建立和操做矢量圖形的JavaScript Library。它使用SVG&VML來建立圖形。由於每一個生成的圖形都是一個DOM對象，因此能夠經過JavaScript操做這些圖形。支持大部分瀏覽器包括：Firefox3.0+、Safari3.0+、Opera9.5+和Internet Explorer6.0+。

 

 

gRaphaël是一個基於Raphaël實現的開源JavaScript圖表製做Library。它既能夠生成靜態圖表，也能夠生成具備交互功能的圖表。圖表類型包括：餅圖，柱狀圖，線狀圖和點狀圖。圖表採用VML建立支持大部分瀏覽器如：Firefox3.0+、Safari3.0+、Opera9.5+和Internet Explorer6.0。

 

 

Highcharts JS是一個純JavaScript製圖Library，支持的圖表類型包括：line、spline、area、areaspline、column、bar、pie和scatter。當鼠標移到圖表上時會利用一個tooltip展現每一點或區域上相關的文本信息。能夠放大圖表，查看某部分更詳細的數據。Highcharts支持大部分瀏覽器包括iPhone和IE6。

 

 

mooBarGraph是一個用於製做Ajax圖表的MooTools插件，支持兩種類型的圖表：簡單柱狀圖和疊加柱狀圖。這個插件利用 JSON數據建立圖表，併兼容大部分瀏覽器包括IE6。它提供的功能包括：能夠設置柱體標籤、顏色、連接URL和ToolTip信息。數據能夠利用Ajax進行加載。

 

jqBarGraph

jqBarGraph是一個易於使用的jQuery插件，用於以柱狀圖的方式展現你的數據。經測試jqBarGraph支持的瀏覽器包括： Safari2+、Internet Explorer6+、Firefox2+、Google Chrome3+、Opera9+。jqBarGraph支持動態增加柱狀圖。

 

Grafico

Grafico是一個基於 Raphaël與 Prototype.js實現的JavaScript Charting Library。支持在鼠標移過圖表時顯示一些額外信息好比當前值，可使用圖片做爲水印背景，添加平均線等。支持的圖表類型包括：

• Line graphs
• Area graphs
• Stacked area graphs
• Stream graphs
• Bar graphs
• Horizontal bar graphs
• Sparklines
• Sparkbars
• Sparkareas

 

 

 

Simile  Widgets

Simile Widgets是一組開源的Web控件用於內容或數據的圖形可視化查看。包括： 

Timeline

Timeplot

 

Runway

 

 

RGraph是一個使用HTML5 Canvas標籤實現的圖表製做Library。利用該Library生成的Chart具備可交互性，當鼠標點擊或移過期會顯示相應的信息，能夠動態加載Chart或對特殊點進行縮放。當前支持的圖表類型包括：

• bar、pie、donut、gantt、radar、funnel、bi-polar charts
• line and scatter graphs
• LED display
• meter
• odometer
• progress bar

 

 

dhtmlxGantt

dhtmlxGantt是一個JavaScript組件可以建立動態的甘特圖和以便利的圖形化方式查看項目計劃。利用dhtmlxGantt能夠展現各個活動之間的依賴關係，顯示當前計劃的狀態（以完成百分比陰影的方式顯示），將活動歸到樹形結構中。該組件兼容大部分瀏覽器包括：IE、Mozilla、Opera、Chrome。

 

BirdEy

 

e

BirdEye是一個開源的Adobe Flex圖表製做組件。用於建立多維數據分析可視化界面。

 

gvChart

gvChart是一個利用Google Chart Tools來建立交互式圖表（Charts）的jQuery插件。可建立的圖表類型有Area、Line、Bar、Column和Pie五種。它使用HTML Tables作數據源來建立圖表。

 

 

canvasXpress

canvasXpress是基於HTML5的標籤實現的一個JavaScript製圖工具包。支持多種圖表製做包括：柱狀圖、線狀圖、點狀圖、Area、Stacked、熱點圖、餅狀圖等。生成的圖表具備可交互性，鼠標放上去可顯示圖表中的值。此外還能夠設置圖表顏色、文本和顯示/隱藏元素等。

 

 

Protovis

Protovis是一個可讓你利用簡單的標記如線條和圓點+數據來繪製自定義圖表JavaScript Lib。

 

 

Table2Chart

Table2Chart是一個輕量級的Mootools插件，壓縮和gzip壓縮文件只有1kb。容許你輕鬆地把一個數據表的數據生成一個餅圖。

Table2Chart

 

 

dhtmlxChart

dhtmlxChart是一個純JavaScript實現的圖表生成組件，支持大部分常見的圖表類型包括：line、spline、area、bar和pie charts。圖表能夠動態更改而不用刷新頁面。此外該組件還支持爲圖表添加其它元素如Tooltips、刻度、標籤等。dhtmlxChart能夠從各類不一樣的數據源（XML、JSON、JS array、CSV）加載數據生成圖表。

 

 

Finger  Chart 

 

Finger Chart （如下簡稱Finger）是一個輕量級的基於Flash技術開發的圖表解決方案(將來考慮擴展到HTML5平臺)，由RIAMeeting社區推出，並基於LGPL協議開源。圖表包括常見圖表類型，包含線圖，柱圖，條圖，餅圖，區域圖，散點圖，氣泡圖等； Finger的應用目標是：Web應用和移動應用，所以也能夠看出圖表命名的初衷，即保持輕量級和較小的資源佔用，以在有限的硬件資源下得到平穩流暢的運行。

 

Finger Chart

 

 

AwesomeChartJS