整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本文中，我將向您展示一些用于圖形/圖表的最佳JavaScript庫(kù)。這些庫(kù)將幫助您為未來(lái)的項(xiàng)目創(chuàng)建漂亮且可自定義的圖表。
雖然大多數(shù)庫(kù)都是免費(fèi)和開源的，但其中一些庫(kù)提供了帶有附加功能的付費(fèi)版本。
當(dāng)我們想到今天的圖表時(shí)，D3.js是第一個(gè)出現(xiàn)的名字。作為一個(gè)開源項(xiàng)目，D3.js肯定會(huì)帶來(lái)許多現(xiàn)有庫(kù)中缺少的強(qiáng)大功能。“enter and exit”等功能，強(qiáng)大的轉(zhuǎn)換和熟悉jQuery或Prototype的語(yǔ)法使其成為最佳的圖表JavaScript庫(kù)。D3.js中的圖表通過(guò)HTML，SVG和CSS呈現(xiàn)。
與許多其他JavaScript庫(kù)不同，D3.js不提供任何預(yù)先構(gòu)建的開箱即用的圖表。但是，您可以查看使用D3.js構(gòu)建的圖表列表以獲得概述。
Google Charts是輕松創(chuàng)建圖表的首選JavaScript庫(kù)。它提供了許多預(yù)先構(gòu)建的圖表，如區(qū)域圖表，條形圖，日歷圖表，餅圖，地理圖表等。
Google圖表還附帶了各種自定義選項(xiàng)，可幫助您更改圖表的外觀。使用HTML5 / SVG呈現(xiàn)圖表，為iPhone，iPad和Android提供跨瀏覽器兼容性和跨平臺(tái)可移植性。它還包括用于支持舊版IE的VML。
Highcharts JS是另一個(gè)非常受歡迎的圖形庫(kù)。它裝載了許多不同類型的炫酷動(dòng)畫，足以吸引許多眼球到您的網(wǎng)站。與其他庫(kù)一樣，Highcharts附帶了許多預(yù)先構(gòu)建的圖形，如樣條曲線，面積，區(qū)域線，柱，條，餅，散點(diǎn)等。
使用Highcharts JS的最大優(yōu)勢(shì)之一是與舊版瀏覽器的兼容性 - 甚至可以回溯到Internet Explorer 6.標(biāo)準(zhǔn)瀏覽器使用SVG進(jìn)行圖形渲染。在舊版Internet Explorer中，使用VML繪制圖形。
雖然Highcharts JS是免費(fèi)供個(gè)人使用，但您需要購(gòu)買商業(yè)用途的許可證。
商業(yè)級(jí)數(shù)據(jù)圖表，它是一個(gè)純JavaScript的圖標(biāo)庫(kù)，兼容絕大部分的瀏覽器，底層依賴輕量級(jí)的canvas類庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。
amCharts無(wú)疑是最美麗的圖表庫(kù)之一。它完全隔離成3個(gè)獨(dú)立的圖表 - JavaScript圖表，地圖圖表（amMaps）和股票圖表。
amMaps是我最喜歡的三個(gè)。它提供的功能包括在地圖上加載圖標(biāo)或照片，熱圖，繪圖線，以及在地圖上添加文本，縮放等。
amCharts使用SVG渲染在現(xiàn)代瀏覽器中工作的圖表。
amCharts具有免費(fèi)和收費(fèi)版本。
ChartJS為圖表提供漂亮的平面設(shè)計(jì)。它使用HTML5 canvas元素進(jìn)行渲染。通過(guò)polyfill添加對(duì)IE7 / 8等舊版瀏覽器的支持。
ChartJS圖表默認(rèn)是響應(yīng)式的。它們適用于手機(jī)和平板電腦。ChartJS開箱即用了6種不同類型的核心圖表（核心，條形圖，圓環(huán)圖，雷達(dá)圖，線圖圖和極地圖），它絕對(duì)是近期最令人印象深刻的開源圖表庫(kù)之一。
Chartist.js提供了漂亮的響應(yīng)式圖表。它使用SVG渲染圖表。它可以通過(guò)CSS3媒體查詢和Sass進(jìn)行控制和定制。另請(qǐng)注意，Chartist.js提供的酷炫動(dòng)畫僅適用于現(xiàn)代瀏覽器。
如果您是Angular開發(fā)人員，您肯定會(huì)發(fā)現(xiàn)n3-charts非常有用且有趣。n3-charts建立在D3.js和Angular之上。它以可定制的Angular指令的形式提供各種標(biāo)準(zhǔn)圖表。
uvCharts是一個(gè)開源JavaScript圖表庫(kù)，聲稱擁有100多個(gè)自定義選項(xiàng)。它有12種不同的標(biāo)準(zhǔn)圖表類型。
uvCharts是使用D3.js庫(kù)構(gòu)建的。它承諾從D3.js中消除所有困難的編碼部分，并提供標(biāo)準(zhǔn)圖表類型的簡(jiǎn)單實(shí)現(xiàn)。uvCharts使用SVG，HTML和CSS呈現(xiàn)。
Plotly.js是第一個(gè)用于Web的科學(xué)JavaScript圖表庫(kù)。它自2015年以來(lái)一直是開源的，這意味著任何人都可以免費(fèi)使用它。Plotly.js支持20種圖表類型，包括直方圖，3d圖，誤差線和地圖。它還可以執(zhí)行所有基本圖表，如條形圖，折線圖和餡餅。
Plotly.js在引擎蓋下使用D3.js，因此它比制作D3.js圖形更容易，而不是單獨(dú)使用D3.js。有關(guān)使用Plotly.js制作的圖表的一些示例，請(qǐng)查看Plotly的圖表新聞Feed。
天我們帶來(lái)一篇來(lái)自Adobe工程師Rohit Boggarapu的文章。他在文章中介紹了一些適合網(wǎng)頁(yè)開發(fā)者的數(shù)據(jù)可視化和繪圖工具，讓你不必再花大力氣與枯燥的數(shù)據(jù)抗?fàn)帯?/strong>部分工具不要求寫代碼也可以使用！
我們?cè)忈寯?shù)據(jù)的方式和數(shù)據(jù)本身之間存在著巨大的鴻溝。尤其是當(dāng)我們唯一的選擇是盯著表格中一列列不知所云的數(shù)字時(shí)。這可能是最無(wú)聊的一種格式了。
沒有哪個(gè)網(wǎng)頁(yè)開發(fā)者會(huì)喜歡電子表格。好消息是，現(xiàn)在我們有了許多更加優(yōu)雅的方式來(lái)呈現(xiàn)數(shù)據(jù)，再也沒有必要使用靜態(tài)的Excel 圖表了。
在為你的項(xiàng)目選擇合適的繪圖工具時(shí)，要考慮到許多事情。本文將為你分析適合網(wǎng)頁(yè)開發(fā)者的 12 個(gè)最好的工具，讓你不再花費(fèi)大把時(shí)間跟數(shù)據(jù)做斗爭(zhēng)，而是開始輕松地繪制漂亮的圖表。雖然本文推薦的工具是面向網(wǎng)頁(yè)開發(fā)者的，但其中一些并不需要會(huì)寫代碼就能使用。許多工具都有著豐富的交互式例子，即使是新手也能輕松地通過(guò)改動(dòng)代碼來(lái)創(chuàng)建自定義圖表。
01 Google Charts
文檔和幫助信息豐富的 Google Charts 對(duì)于剛剛?cè)腴T JavaScript 繪圖的人來(lái)說(shuō)是極佳的選擇。它的文檔里到處都是帶注釋的代碼和逐步的講解，可以直接用來(lái)把 HTML5 / SVG 圖標(biāo)嵌入到你的網(wǎng)頁(yè)中。
如果你需要更進(jìn)階的自定義功能或是 Google 原始提供的 18 類以外的圖表，下面會(huì)介紹一些有著更多類別和特性的選擇。
適合人群：追求靈活性和良好文檔的嚴(yán)肅開發(fā)者。
02 MetricsGraphics
MetricsGraphics 是一個(gè)在 D3.js 的基礎(chǔ)上專為可視化時(shí)間序列數(shù)據(jù)而開發(fā)的繪圖庫(kù)。雖然它只支持線圖、散點(diǎn)圖、柱狀圖、直方圖和數(shù)據(jù)表格，但它在這幾類圖表上的表現(xiàn)非常強(qiáng)。
跟 Google Charts 一樣（MetricsGraphics 是 Mozilla 的產(chǎn)品），豐富的文檔和例子使得它很容易上手。比如這個(gè)非常有趣的關(guān)于 UFO 目擊事件的交互式例子。
同時(shí)它也是一個(gè)非常簡(jiǎn)易和輕量級(jí)的選擇。
適合人群：追求快速美觀同時(shí)又不需要寫一堆雜亂代碼的開發(fā)者。
03 FusionCharts
FusionCharts 支持 vanilla JavaScript、jQuery、Angular 等一系列高人氣的庫(kù)和框架。它內(nèi)置90多種圖表和超過(guò)1000種地圖，相比 Google Charts 和 MetricsGraphics 要完整得多。你可以在這里查看它所支持的全部圖表類型。
考慮到應(yīng)用或是網(wǎng)站的拓展性，如果你選擇了一個(gè)功能不完整的繪圖庫(kù)，這就有可能在將來(lái)發(fā)展成一個(gè)問(wèn)題。而像Microsoft、Google 和 IBM 這樣的公司都在使用 FusionCharts，這說(shuō)明它是一個(gè)能滿足企業(yè)級(jí)拓展性需求的工具。
適合人群：需要各種不同種類的易自定義圖表的開發(fā)者。
04 Epoch
Epoch 是一個(gè)基于 d3.js 開發(fā)的工具，它使得開發(fā)者可以方便地在他們的應(yīng)用或是網(wǎng)站上部署實(shí)時(shí)圖表。它的文檔整潔，完全免費(fèi)并且開源，這使得它對(duì)于不想花錢購(gòu)買重量級(jí)解決方案的人來(lái)說(shuō)是一個(gè)很好的選擇。
對(duì)普通數(shù)據(jù)和實(shí)時(shí)數(shù)據(jù)，Epoch 都支持 5 種圖表類型。這個(gè)數(shù)量并不能與 FusionCharts 或是 Highcharts 這種特性完整的產(chǎn)品對(duì)抗，但它所專長(zhǎng)的是以簡(jiǎn)單和友好的方式呈現(xiàn)實(shí)時(shí)數(shù)據(jù)。
適合人群：需要簡(jiǎn)單靈活的實(shí)時(shí)數(shù)據(jù)呈現(xiàn)方案的開發(fā)者。
05 ECharts
百度的 ECharts 是一個(gè)很棒的工具，它支持在繪制完數(shù)據(jù)后再對(duì)其進(jìn)行操作。這個(gè)被稱為 Drag-Recalculate 的特性使得用戶可以在圖表之間拖動(dòng)一部分的數(shù)據(jù)并得到實(shí)時(shí)的反饋。同時(shí)，ECharts 是專為繪制大量數(shù)據(jù)設(shè)計(jì)的。它可以瞬間在二維平面上繪制出 20 萬(wàn)個(gè)點(diǎn)，并用專為 ECharts 開發(fā)的輕量級(jí) Canvas 庫(kù) ZRender 使數(shù)據(jù)動(dòng)起來(lái)。
你可以在這里對(duì)上圖進(jìn)行操作，來(lái)體驗(yàn) ECharts 所提供的特性。
適合人群：想盡量避免寫代碼并有實(shí)時(shí)數(shù)據(jù)操作需求的開發(fā)者。
06 D3.js
雖然并不是對(duì)用戶最友好的工具，但 d3.js 在 JavaScript 繪圖界的重要性是不可小覷的。許多其他的庫(kù)都是基于它所開發(fā)，因?yàn)樗峁┝四闼芟氲降乃泄δ堋ＫС?HTML、SVG 和 CSS，并且有著海量的用戶貢獻(xiàn)內(nèi)容來(lái)彌補(bǔ)它缺乏自定義內(nèi)容的劣勢(shì)。
適合人群：不怕寫代碼的硬核繪圖專家。
07 Sigma
跟上面已經(jīng)提到過(guò)的工具相比，Sigma 有著自己獨(dú)特的定位，那就是圖模型的繪制。它基于 Canvas 和 WebGL 開發(fā)并提供了公開的 API。所以你可以在 GitHub 上找到社區(qū)貢獻(xiàn)的許多插件。舉例來(lái)說(shuō)，你可以用 Sigma.js 畫出這樣的圖：
Sigma 同時(shí)也是響應(yīng)式的，并支持觸屏。開發(fā)者很容易添加新的功能以及精細(xì)地控制邊和頂點(diǎn)的規(guī)格。
適合人群：需要專為繪制圖模型設(shè)計(jì)的強(qiáng)大工具的開發(fā)者。
08 Highcharts
人氣極高的 Highcharts 可以在不依賴插件的情況下繪制交互式的圖表。它高靈活性的繪圖 API 也被 Nokia、Twitter、Visa 和 Facebook 這樣的公司所青睞。
Highcharts 對(duì)于非商業(yè)使用是免費(fèi)的，而商業(yè)許可的價(jià)格是一份590美元（附帶技術(shù)支持）。
這是一個(gè)用它繪制的例子：
適合人群：需要在技術(shù)支持的幫助下繪制各種復(fù)雜的圖表的開發(fā)者。
09 dc.js
dc.js 是一個(gè)開源的 JavaScript 繪圖庫(kù)。它非常適合用來(lái)創(chuàng)建交互式的儀表盤（Dashboard）。圖表之間是有聯(lián)系的，所以當(dāng)你與其中一個(gè)部分進(jìn)行交互時(shí)，其他部分都會(huì)做出實(shí)時(shí)的反饋。這是一個(gè)例子：
除了一些在線課程以外，你可以通過(guò)各種例子來(lái)學(xué)習(xí)使用這個(gè)庫(kù)。等你照著文檔動(dòng)手一遍以后就有能力創(chuàng)建自己的圖表了。
雖然 dc.js 并沒有像 ECharts 或是 Google Charts 那樣豐富的功能，但它在自己的賣點(diǎn)——易于呈現(xiàn)和探索巨量的維度數(shù)據(jù)集上做的非常好。
適合人群：需要為關(guān)系型圖表創(chuàng)建一個(gè)儀表盤的開發(fā)者。
10 dygraphs
由 Google 開發(fā)的 dygraphs 絕對(duì)是繪圖工具中的明星。到現(xiàn)在 Google Correlate 還在使用它（當(dāng)然，在設(shè)計(jì)上經(jīng)過(guò)了一些調(diào)整）。它可以被用于繪圖密集的項(xiàng)目，因?yàn)樗?strong>在不影響性能的情況下輕松地繪制幾百萬(wàn)個(gè)數(shù)據(jù)點(diǎn)，這在很大程度上彌補(bǔ)了它那過(guò)于樸素的審美設(shè)計(jì)。
從一開始作為 Google 的一個(gè)內(nèi)部項(xiàng)目到最后公開發(fā)布，dygraphs 一直有著活躍的社區(qū)支持。同時(shí)它也在 GitHub 上開源。
適合人群：需要有著活躍支持的專為繪制海量數(shù)據(jù)集設(shè)計(jì)的工具的開發(fā)者。
11 Vega
Vega 是一個(gè)基于 d3.js 的用于創(chuàng)建、分享和保存可視化圖標(biāo)的庫(kù)。它由許多部件組成，其中一些能夠在不需要寫代碼的前提下達(dá)到與 d3 競(jìng)爭(zhēng)的水平。Vega 能夠把 JSON 數(shù)據(jù)轉(zhuǎn)換成 SVG 或 HTML5 圖表。雖然這沒什么了不起的，但它把這一步做的很踏實(shí)。
因?yàn)槭褂?Vega 不需要寫任何代碼（只要會(huì)編輯 JSON 文件即可），它是一個(gè)很好的 d3 替代品，能在降低使用復(fù)雜度的同時(shí)保留 d3 的特性。
適合人群：需要 d3 強(qiáng)大的特性又不希望從頭學(xué)起的開發(fā)者。
12 NVD3
最后介紹的工具也是基于 d3.js 的。作為繪圖界的佼佼者，NVD3 是由一系列部件組成的，允許開發(fā)者創(chuàng)建可重用的圖標(biāo)。你可以在它的網(wǎng)站上找到許多 demo 和對(duì)應(yīng)的代碼。這也是上手 NVD3 的最佳方式。
你可以看到，NVD3 的審美風(fēng)格要比 d3.js 更為精致一點(diǎn)。
它支持 11 種圖表類型，包括區(qū)域圖、線圖、柱狀圖、氣泡圖、餅狀圖和散點(diǎn)圖。同時(shí)也支持所有現(xiàn)代瀏覽器以及 IE 10 以后的版本。
適合人群：熟悉 d3 并想要可重用圖表的開發(fā)者。
來(lái)源于網(wǎng)絡(luò)
推薦閱讀
《Python數(shù)據(jù)可視化》
作者：（印）科斯·拉曼（Kirthi Raman）
本書介紹了利用Python實(shí)現(xiàn)數(shù)據(jù)可視化。并介紹了數(shù)據(jù)、信息與知識(shí)之間的關(guān)系。書中涉及的可視化過(guò)程應(yīng)用了大量流行的Python庫(kù)，你會(huì)學(xué)到采用Numpy、Scipy、IPython、MatPotLib、Pandas、Patsy和Scikit-Learn等生成可視化結(jié)果的不同方法。
全國(guó)喝酒圖鑒
什么是橫斷山？
褚時(shí)健：活著是為了什么？
大江大河40年：改變命運(yùn)的七次機(jī)遇
中國(guó)422位皇帝被拉到一個(gè)微信群里，他們?cè)诹男┦裁茨兀?/p>
1：D3
一個(gè)基于數(shù)據(jù)操作文檔的js數(shù)據(jù)可視化框架，最流行的可視化庫(kù)之一。
2：Chart.js
基于 HTML5 的 JavaScript 圖表庫(kù)
3：ECharts
ECharts 是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫(kù)，涵蓋各行業(yè)圖表，滿足各種需求。是百度的一個(gè)開源的數(shù)據(jù)可視化工具。
4：Leaflet
Leaflet 是一個(gè)為移動(dòng)設(shè)備設(shè)計(jì)的交互式地圖的開源的 javascript庫(kù)， 并只有38k，包含了大多數(shù)開發(fā)者需要的地圖特點(diǎn)。常常被用于需要展示地理位置的項(xiàng)目。
5：highcharts
star:9.5K
基于SVG的JavaScript 圖表框架，兼容 IE6+、完美支持移動(dòng)端、圖表類型豐富、方便快捷的 HTML5 交互性圖表庫(kù)。一般的問(wèn)題好解決，但是一旦遇到了關(guān)鍵問(wèn)題，個(gè)人支持非常有限， 支持圖形相對(duì)于fusioncharts來(lái)說(shuō)，比較少
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
