JavaScript chart－－15款JavaScript製圖表庫

標籤：

譯文來源：http://www.sitepoint.com/15-best-javascript-charting-libraries/

我們無法想像一個沒有圖表的Dashboard會是什麼樣。圖表可以對資料進行直觀有效展示。不僅如此，圖表的巧妙應用還可以提升網站的整體視覺效果。

本文將介紹一些非常好用的製作圖表的JavaScript庫。這些庫能夠協助你完成你未來項目中的漂亮的、可定製化的圖和表。

文中介紹的庫大多是免費的，當然也有一些庫會提供功能更加強大的付費版。

　　1. D3.js —— 資料驅動型

今天，當我們想到要製作圖表時，D3將是腦海中出現的第一個名字。作為一個開源的庫，D3還是提供很多其他現有庫所沒有的強大功能。“進入和離開”的功能，良好的漸層和文法與jQuery與Prototype相似，這些特性都是D3被推崇為最佳製作圖表的庫的原因。使用D3製作的圖表會被轉化為HTML、SVG或CSS的代碼。

與其他庫不同的是，D3不能與包含任何在box外預先產生的圖表。當然，想要瞭解更多類似的屬性，你可以瀏覽一下已使用D3的項目。

D3對較老瀏覽器的支援情況不容樂觀，例如IE8。你可以使用aight plugin等外掛程式來應對相容性問題。

應用D3的網站包括NYTimes，Uber和Weather.com。

　　2. Google Charts

Google Charts 是一款很容易使用的庫。它提供了多種預先製作的圖，包括面積圖、橫條圖、日期圖、餅狀圖和地理圖等。

Google Charts也包含了很多的定製化選項來對圖形進行修改。圖表會被轉化為HTML 5/SVG的代碼來解決跨瀏覽器的跨平台的問題。例如IPhones，IPads和Andriod。它還能夠將圖錶轉化為VML來相容老版本的IE瀏覽器。

　　3. Chart.js

ChartJs提供了扁平化的圖表，使用HTML 的canvas來進行代碼轉換，應用ployfill來對IE7/8進行支援。

ChartJS預設是響應式的，在移動和平板裝置中運行良好。它有六種不同樣式的圖表（），這使得它成為了一段時間內最迷人的開源庫。

　　4. Chartist.js

Chartist可以提供美觀的響應式圖表。同ChartJS一樣，Chartist也是社區的人們無法忍受高費用的JavaScript庫而製作的。它使用SVG來進行代碼轉化，可以通過CSS3 媒介查詢和Sass來進行設定。值得注意的是，如果使用現代瀏覽器中的話，Chartist可以用於製作酷炫的動畫。

　　5. n3-charts

如是你是一名AngularJs開發人員，那麼你一定會感歎於n3的易用和有趣。n3是構建是基於D3和AngularJs的。它使用指令的形式來提供不同樣式的圖表。

　　6. Ember Charts

Ember Charts是一個使用D3和Ember構建的開源庫。它提供多種圖形，使用簡便。代碼轉化由SVG完成。

　　7. Smoothie Charts

如果你正在處理流資料，那麼Smoothie Charts正適合你。它使用canvas來轉化代碼，是一個純JavaScript的程式碼程式庫，並為即時圖表提供了保持和顏色閃爍的功能。

　　8. Chartkick

Chartkick適用於Ruby的項目，提供了多種圖表圖形，使用SVG進行代碼轉化。

　　9. ZingChart

ZingChart用於快速構建靈活、可互動、響應迅速並可縮放的現代產品。它已被應用於許多項目中，例如Apple、Adobe、Boein個好Walmart。ZingChart使用Ajax、JSON和HTML 5來快速傳輸美觀的圖表。

ZingChart不僅提供免費的試用版，還提供了不同價位的商用版來滿足您的業務需求。

　　10. HighchartsJS

HighchartsJS是一款非常流行的庫。它為圖表提供了許多的動畫功能，這些足以牢牢吸引那些顧客的目光。HighchartsJS也提供了很多種類的圖形。

HighchartsJS最大的有點之一在於它可以相容例如IE6這樣的老版本瀏覽器。對於現代瀏覽器，它使用SVG，對於老闆的瀏覽器，圖表則被轉化為VML。

HighchartsJS提供了免費的個人試用版和商用付費版。

　　11. Fusioncharts

Fusioncharts是最悠久的製圖表庫之一，它發佈於2002年。圖表的代碼會被轉化HTML 5／SVG和VML來保證可移植性和相容性。

與其他不同的是，Fusioncharts提供了直接處理JSON和XML的能力。你還可以使用PNG、JPG或PDF的格式來到處這些圖表。

Fusioncharts對老版本瀏覽器的相容性十分良好。只這一點就成為了它在眾多公司中流行的原因。

你可以帶著Fusioncharts的浮水印來免費使用它。如果想移除這個浮水印則需要購買付費版。

　　12. Flot

Flot為jQuery而創造，也是誕生很早的流行庫之一。

Flot支援線條圖、點狀圖、面積圖、橫條圖或他們的任意組合。它也相容老版本的瀏覽器，例如IE6和Firefox2。

Flot是完全免費的，同時也會應顧客的要求提供付費的商業支援。

　　13. amChart

amChart無疑是這些庫中最漂亮的表徵圖庫。它將自己完美地分離為3個獨立的庫——JavaScript Charts、Maps Charts(amMaps)和Stock Charts。

amMap是上述三者中作者做喜歡的部分。它提供了很多功能，包括地圖上的載入表徵圖或圖片，熱力圖，畫線，並能夠在地圖上添加文字，縮放等。

amChart 使用SVG來轉化代碼，並只能在現代瀏覽器中運行。有它建立的圖表或許不會在IE9以下的瀏覽器中運行。

免費版的amChart會在每張圖上方留有一個指向其網站的連結。他的商用版的費用會比市場上其他產品略高一些。

　　14. EJS Chart

EJS Chart宣城他們是准符合企業級的軟體。有它產生的圖表比一些曆史悠久的庫更加整潔和易讀。它也相容IE6+和其他版本的瀏覽器。

EJS同時有免費版和付費版。免費版會限制你在一頁中只能有一張圖，每張圖只能展示2組資料。

　　15.uvCharts

uvChart是一個開源的JavaScript製圖表庫。他宣稱有100種以上的定製化選擇和12種不同樣式的圖表。

uvChart使用D3來構建庫。它聲稱自己移除了D3所有晦澀的代碼並提供了建立標準圖表的簡單方法。uvChart使用SVG，HTML和CSS來進行代碼轉換。

 

結論：

現在該由你來選擇使用哪個庫來構建你未來的應用了。

想要對圖表進行更多控制的開發人員必然會傾向於選擇D3。

這些庫都在Stackoverflow的論壇上提供了很好地支援人員。

 

JavaScript chart－－15款JavaScript製圖表庫