整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
己要寫一個(gè)餅圖費(fèi)時(shí)費(fèi)力，用canvas雖然可以實(shí)現(xiàn)，但是很難達(dá)到預(yù)期的效果，網(wǎng)上有很多開源的圖表組件庫，我們可以在這個(gè)基礎(chǔ)上進(jìn)行二次開發(fā)，方便而且省時(shí)省力，也可以寫出很酷炫的效果！
01 echarts
地址：https://echarts.apache.org/
推薦：★★★★★
簡(jiǎn)介：ECharts，一個(gè)強(qiáng)大的、交互式的瀏覽器圖表和可視化庫。是我用得最多的圖表庫了。豐富的圖表庫，很多用戶把自己的模板都上傳在這里，多達(dá)幾萬個(gè)圖表模板！
02 highcharts
地址：https://www.highcharts.com.cn/
推薦：★★★★★
簡(jiǎn)介：兼容 IE6+、完美支持移動(dòng)端、圖表類型豐富、方便快捷的 HTML5 交互性圖表庫！
03 chart.js
地址：https://www.chartjs.org/
推薦：★★★★
簡(jiǎn)介：Chart.js 是由社區(qū)共同維護(hù)的開源項(xiàng)目,歡迎任何人參與! 8 種圖表類型 為你的數(shù)據(jù)提供 8 種可視化展現(xiàn)方式,每種方式都具有動(dòng)態(tài)效果并且可定制。在所有現(xiàn)代瀏覽器（IE11+）上都有高效的繪圖效率。
04 Antv
地址：https://antv.vision/zh
推薦：★★★★★
簡(jiǎn)介：Antv 是螞蟻集團(tuán)全新一代數(shù)據(jù)可視化解決方案,致力于提供一套簡(jiǎn)單方便、專業(yè)可靠、無限可能的數(shù)據(jù)可視化最佳實(shí)踐。它是一個(gè)龐大的圖表生態(tài)系統(tǒng)。不單單包含基礎(chǔ)圖表組件。其中的G2更適合我們今天介紹的圖表庫。
05 bizCharts
地址：https://antv.vision/zh
推薦：★★★★
簡(jiǎn)介：BizCharts是阿里通用圖表組件庫，致力于打造企業(yè)中后臺(tái)高效、專業(yè)、便捷的數(shù)據(jù)可視化解決方案，基于 G2與G2Plot封裝的React圖表庫，已經(jīng)歷阿里復(fù)雜業(yè)務(wù)場(chǎng)景長達(dá)三年的洗禮，在靈活性、易用性、豐富度上滿足常規(guī)圖表和高度自定義圖表的業(yè)務(wù)實(shí)現(xiàn)。缺點(diǎn)就是沒有vue版的。
06 three.js
地址：https://threejs.org/
推薦：★★★★★
簡(jiǎn)介：3D圖表的首選，是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。
07 datav
地址：http://datav.jiaminghi.com/
推薦：★★★★★
簡(jiǎn)介：含有react和vue版的，搭配echarts一起使用簡(jiǎn)直完美！它通過組合不同的配置項(xiàng)可以達(dá)到多變的視覺效果。大部分組件設(shè)置寬高或配置簡(jiǎn)單的數(shù)據(jù)即可使用。有三個(gè)demo，不過我看很久沒維護(hù)了。
個(gè)企業(yè)在做重要決定時(shí)都傾向于做數(shù)據(jù)分析，實(shí)際上他們很多時(shí)候都是沉淪在數(shù)據(jù)里頭，不知道如何跳出其中。企業(yè)一直尋求更好的方式來可視化數(shù)據(jù)、進(jìn)行更好的互動(dòng)、使圖表多角度化。畢竟，只有從數(shù)據(jù)中得出的見解才是有用的。
JavaScript 圖表庫出現(xiàn)了，作為美觀且容易理解的交互式的可視化圖表最有力的工具，它更容易提取和傳達(dá)關(guān)鍵的模式和見解，而這一點(diǎn)在靜態(tài)圖表中往往不明顯。
為了使事情更加簡(jiǎn)單，我努力挖掘了很多選項(xiàng)，找到了最好的JavaScript 圖表庫。來，讓我們開始吧。
1、chartist
Chartist的高效和人性化設(shè)計(jì)甚至吸引了離開 Excel 就會(huì)感覺不舒服的人。可響應(yīng)（使用媒體查詢）和獨(dú)立 DPI 意味著這些圖表可以為你提供一個(gè)良好的解決方案，如果你在考慮將你的圖表應(yīng)用于包括手機(jī)，平板和桌面電腦的多終端設(shè)備，基于SVG的設(shè)計(jì)讓它在未來更具兼容性。
Chartist 的與眾不同在于它是社區(qū)的成果，這使得它沒有其他圖表庫的局限性。由于過于關(guān)注瑣碎的變動(dòng)和功能完整，導(dǎo)致你在使用其他類庫時(shí)很焦心。
協(xié)議: 開源，所有用戶皆可免費(fèi)使用。
2、FusionCharts
FusionCharts帶來了最全面的庫，超過90種圖表和900種圖——所有均就緒備用。它們自詡為行業(yè)內(nèi)最好看的圖表，它提供了一個(gè)功能強(qiáng)大的體驗(yàn)儀表板，通過它可以鳥瞰其整個(gè)業(yè)務(wù)功能。
FusionCharts 兼容從 PC 和 Mac 電腦，iPhone 和 Android 平板電腦等多種設(shè)備；他們做了許多額外的努力來確保跨瀏覽器的兼容性，甚至包括 IE6！
他們還涵蓋了所有基礎(chǔ)格式 —— JSON 和 XML 數(shù)據(jù)格式都能夠接受；繪制可以通過 HTML5、SVG 和 VML，圖表可以導(dǎo)出為 PNG、JPG 或 PDF 格式。FusionCharts 的擴(kuò)展可以很容易地與你所選擇的任何技術(shù)集成，包括 jQuery，AngularJS，PHP 和 Rails。
總的來說，F(xiàn)usionCharts 擁有你創(chuàng)建漂亮圖表和做嚴(yán)格業(yè)務(wù)分析所需的任何特征和格式。而且最好的部分是非商業(yè)用途時(shí)你可以免費(fèi)下載并使用，沒有任何限制。
源碼許可證：非商業(yè)免費(fèi)，商業(yè)用途收費(fèi)。
3、DyGraphs
Dygraphs 是一個(gè)開源的 JavaScript 圖表庫，最適用于極端大數(shù)據(jù)集。它是開箱式互動(dòng)，通過縮放甚至可以支持手機(jī)。
它既兼容主流瀏覽器，也向后兼容 IE8。選項(xiàng)和自定義回調(diào)功能使它具有極高的可配置性。
協(xié)議: 開源，面向所有用戶免費(fèi)。
4、Chartjs
Chart.js適用于小項(xiàng)目，扁平化，干凈，優(yōu)雅，快速。它是一個(gè)微型的開源庫，最小化壓縮后只有11kb大小。它包括六個(gè)核心圖表類型（線圖，柱圖，雷達(dá)圖，極地圖，餅圖和環(huán)形圖），每個(gè)都是獨(dú)立的模塊，所以你甚至可以只加載項(xiàng)目需要的模塊以最大化縮小代碼占用空間。
它使用HTML5 canvas元素渲染圖表，并且使用polyfills方式兼容在IE7/8上運(yùn)行。所有圖表都是可響應(yīng)的。
協(xié)議: 開源，面向所有用戶免費(fèi)。
5、GoogleCharts
Google Charts 提供大量不同種類的圖表，它最大程度上滿足了數(shù)據(jù)可視化的需要。圖表基于 HTML5/SVG，為了兼容老版本的 IE 還支持 VML。所有的圖表都是可交互可縮放的。你可以去看看他們的圖表庫。最棒的是他們的圖表絕對(duì)免費(fèi)。
協(xié)議：免費(fèi)，但是不開源，在你的服務(wù)器上使用他們的 JS 文件是 Google’s協(xié)議不允許 的。因此如果你是一家企業(yè)并且有很多敏感數(shù)據(jù)，Google Charts 可能不是一個(gè)最佳的選項(xiàng)。
6、HighCharts
Highcharts 是又一個(gè)流行的交互圖表庫，與其他庫一樣，它是基于 HTML5/SVG/VML，所以不需要擴(kuò)展插件。提供的圖表類型很廣泛，像曲線圖，柱狀圖，條形圖，地圖，儀表盤等。
它還提供個(gè)人用戶免費(fèi)可在線生成交互式圖表的接口 Highcharts cloud，商業(yè)使用需要購買授權(quán)。
協(xié)議: 非商業(yè)使用免費(fèi)，商業(yè)使用付費(fèi)。
7、Flot
Flot 是最古老的圖表庫之一，用法簡(jiǎn)單并聚焦交互特性。它是特定的 jQuery 庫，這意味著使用它需要熟悉基礎(chǔ)的 jQuery。但是從另一方面來說，這意味著你可以全面控制呈現(xiàn)，動(dòng)作和用戶交互。
Flot 兼容大多數(shù)瀏覽器，向下兼容到 IE6。Flot 的插件庫提供許多類型的圖，所有貢獻(xiàn)都是社區(qū)提供的。你可以看看這些由 Flot 制作的例子。
協(xié)議: 開源，面向所有用戶免費(fèi)。
8、D3.js
D3通常是提到數(shù)據(jù)可視化時(shí)出現(xiàn)的第一個(gè)名字。它是一個(gè)非常強(qiáng)大的開源項(xiàng)目，可以通過動(dòng)態(tài)更新DOM創(chuàng)造出驚人的視覺效果和圖形。另外，它使用HTML，CSS和SVG。
它符合W3C標(biāo)準(zhǔn)，并且是跨瀏覽器兼容的。開發(fā)者們往往喜歡它所帶來的許多特征，比如“進(jìn)入和退出”以及強(qiáng)大的過渡。你可以到這里找到一些 D3 的示例。
需要說明的是，它沒有預(yù)建圖表，即時(shí)學(xué)習(xí)基本的圖表也有一條非常陡峭的學(xué)習(xí)曲線。但開發(fā)者們極富創(chuàng)新性，開發(fā)出了不少基于D3的包裝庫。后面我們將涉及到其中的一些佼佼者。
源碼許可證: 開源。免費(fèi)使用。
9、n3-charts
如果你正在尋找一種在 AngularJS 應(yīng)用下創(chuàng)建簡(jiǎn)單互動(dòng)線圖的方法，這將是你所需要的。N3 基于D3.js，針對(duì)少量受眾–基于 AngularJS 繪制通用線圖。如果你需要更多的圖表類型，它可能不適合你。你可以在這里看到一些N3線圖的實(shí)例。
源碼許可證：開源。對(duì)所有人免費(fèi)。
10、NVD3
NVD3是一個(gè)旨在建立可復(fù)用的圖表和組件的 d3.js 項(xiàng)目——它提供了同樣強(qiáng)大的功能，但更容易使用。它可以讓你處理復(fù)雜的數(shù)據(jù)集來創(chuàng)建更高級(jí)的可視化。
源碼許可證：開源。對(duì)所有人免費(fèi)。
11、Ember Charts
Addepar 的開發(fā)者正為提升 Ember 以及其附屬庫 Ember Charts、Ember Tables 和 Ember Widgets 的體驗(yàn)的工作而穩(wěn)步推進(jìn)著。Ember Charts 基于 D3.js 和 Ember.js 框架提供了一個(gè)易于使用的，可擴(kuò)展的圖表套件。
其強(qiáng)壯且優(yōu)雅——針對(duì)壞數(shù)據(jù)的錯(cuò)誤處理能確保有壞數(shù)據(jù)時(shí)應(yīng)用程序不會(huì)崩潰。你甚至可以通過擴(kuò)展它來創(chuàng)建自己的圖表類型。
源碼許可證：開源。對(duì)所有人免費(fèi)。
12、jQuery Sparklines
我們一直在談?wù)撃切┠芨愣ㄒ磺械闹亓啃偷膸臁５袝r(shí)你需要的是針對(duì)簡(jiǎn)單的任務(wù)簡(jiǎn)單些的東西。jQuery Sparklines 插件提供了一個(gè)合適的解決方案。它能夠被用來生成迷你型的小內(nèi)嵌圖表，剛好足夠去表現(xiàn)趨勢(shì)——只需要最小量的編碼。適用于大多數(shù)現(xiàn)代瀏覽器包括更老的IE6。
源碼許可證：開源。對(duì)所有人免費(fèi)。
13、Sigma.js
當(dāng)我們?cè)谔囟ǖ氖褂脠?chǎng)景下時(shí)，我們必須談?wù)?Sigma。Sigma 是一個(gè)強(qiáng)大的 JavaScript 庫，其關(guān)注于呈現(xiàn)交互圖形和 Web 網(wǎng)絡(luò)。
Sigma 的庫和插件包有大量的互動(dòng)設(shè)置。一旦你使用了 Sigma，你將再也不會(huì)覺得線圖無聊。看一下這個(gè)sigma.js側(cè)翻演示你就會(huì)明白我的意思。
源碼許可證：開源。對(duì)所有人免費(fèi)。
14、Morris.js
是的，正如 Morris 所說，好看的圖不應(yīng)該制作困難。Morris 是一個(gè)基于 jQuery 和 Raphael 的輕量級(jí)庫，它提供簡(jiǎn)單干凈的線條，面積圖，條形及圓環(huán)圖。如果你正在尋找一些快速簡(jiǎn)單且優(yōu)雅的庫，它絕對(duì)值得一試。
源碼許可證：開源。對(duì)所有人免費(fèi)。
15、Cytoscape.js
Cytoscape.js 是一個(gè)開源的、功能齊全的圖形庫，它純粹用 JavaScript 編寫，基于 LGPL3+ 并完全免費(fèi)。經(jīng)過高度優(yōu)化之后，它并不依賴外部。Cytoscape.js 可以讓你創(chuàng)建可復(fù)用的圖形工具，并能夠集成到你的 JavaScript 代碼中。
它同樣兼容所有現(xiàn)代瀏覽器，還兼容各種軟件框架，比如CommonJS和Node.js，AMD/Require.js，jQuery 以及 Meteor/Atmosphere 等。注意，雖然它與Cyctoscape 桌面應(yīng)用名字相同，但它們是完全不同的。
源碼許可證：免費(fèi)。對(duì)所有人免費(fèi)。
16、C3.js
C3.js 是另一個(gè)基于 D3 可重用的圖表庫。大量的基于 D3 的圖表工具表明了太多人喜歡 D3 的功能，但也反映了大家討厭用 D3 直接編碼。
C3.js 提供了一種不同于 D3 學(xué)習(xí)曲線的方法，它將構(gòu)建整個(gè)圖表所需要的代碼進(jìn)行了包裝。C3允許你創(chuàng)建自定義的類，這樣就可以生成自己的風(fēng)格。它提供了大量的API和回調(diào)，以便你可以在第一次渲染之后更新圖表。
源碼許可證：開源。對(duì)所有人免費(fèi)。
17、Rickshaw
Rickshaw 在 Shutterstock 被開發(fā)為一個(gè)建時(shí)間序列圖的工具包。像其他一些我們已經(jīng)討論過的工具一樣，Rickshaw 也是基于 D3 庫。它是開放并開源的（遵循 MIT 許可）。
你可以在這里看到一些 Rickshaw 的有趣例子。Rickshaw 的眾多擴(kuò)展和自定義的特性能夠讓你生成漂亮的時(shí)序圖。
源碼許可證：開源。對(duì)所有人免費(fèi)。
18、Cubism.js
Cubism 也許是顯示時(shí)間序列最佳的 D3 插件。是什么使它脫穎而出的呢？你可以引入多個(gè)來源的數(shù)據(jù)，比如 Graphite、Cube 和其他來創(chuàng)造令人敬畏的實(shí)時(shí)圖表來展現(xiàn)你的數(shù)據(jù)。
它能夠渲染增量，使用 Canvas 來一次一個(gè)像素的偏移圖表。Cubism 的水平圖要比標(biāo)準(zhǔn)的平面圖更好地利用垂直空間，能夠讓你一眼下來獲取更多的數(shù)據(jù)并增加一目了然的可能性。
源碼許可證：開源。對(duì)所有人免費(fèi)。
19、Plottable.js
Plottable 采取了一些不同于 D3 框架的方法。它已經(jīng)有一套可插拔的模塊化組件，這些組件封裝了渲染邏輯。這形成了一個(gè)單獨(dú)的布局引擎用來實(shí)際定位。
這意味著你可以使用任何 Plottable 的組件并將其添加到現(xiàn)有的圖表，或使用 Plottable 創(chuàng)建一個(gè)全新的圖表。它基本以一個(gè)更模塊化、即插即用的方式賦予了你 D3 的力量。可以通過這些示例看一下 Plottable 的能力。
源碼許可證：開源。對(duì)所有人免費(fèi)。
20、Canvas.js
正如名字所隱含的，Canvas.js 是一個(gè) HTML5 —— JavaScript 的圖表庫，基于 Canvas 元素。Canvas 允許你創(chuàng)建完全響應(yīng)式且跨設(shè)備的豐富圖表。除此之外，它有許多很好看的主題，他們聲稱要比傳統(tǒng)的基于 Flash 和 SVG 圖型快10倍。
源碼許可證：非商業(yè)免費(fèi)，商業(yè)用途收費(fèi)。
總結(jié)
數(shù)據(jù)的可視化和分析是當(dāng)今業(yè)務(wù)流程的的一個(gè)重要的組成部分。公司不論大小，都需要簡(jiǎn)潔、高效、互動(dòng)性的方式來詮釋數(shù)據(jù)。所以選擇適合你需求的 JavaScript 圖表庫尤為重要。
像 FusionCharts，GoogleCharts，Dygraphs 或 D3 的衍生庫可能更適合那些處理大量數(shù)據(jù)的企業(yè)，或那些很大程度上依賴于數(shù)據(jù)分析的小公司。如果你只需要一些小而快的庫，Morris.js 或 Chart.js 或許更適合你。對(duì)于圖形和和網(wǎng)絡(luò)，Cytoscape 或 Sigma.js 可能是更好的選擇。
我盡量將最好的工具包括在這里，但我相信你也有你的最愛，你最喜歡的 JS 圖表庫是哪個(gè)，為什么？
為一名前端 Web 開發(fā)人員，能夠像制作漂亮的交互式網(wǎng)頁一樣多地可視化數(shù)據(jù)是一項(xiàng)很棒的技能。這些 JavaScript 庫使這項(xiàng)任務(wù)變得更容易，因?yàn)殚_發(fā)人員不必忍受語言語法的變化就可以將這些神奇的數(shù)字轉(zhuǎn)換為易于理解的圖表。
在本文中，我們討論6個(gè)可以提供幫助的庫。
Echarts
Echarts 對(duì)于可視化網(wǎng)頁上的數(shù)據(jù)非常有用。 有了它，你可以創(chuàng)建直觀、可自定義和交互式的圖表，從而更輕松地解釋和分析數(shù)據(jù)。
許多 JavaScript 圖表庫已被移植到 JavaScript，這意味著它們的使用不會(huì)無縫銜接。 但是，Echarts 并非如此，因?yàn)樗怯眉?JavaScript 編寫的。
TauCharts
TauCharts 是目前最靈活的 JavaScript 圖表庫之一，它也是基于 D3 的，是一個(gè)以數(shù)據(jù)為中心的 JavaScript 圖表庫，可以改進(jìn)數(shù)據(jù)可視化。TauCharts 允許輕松訪問他們的 API。 為用戶提供無縫映射和可視化數(shù)據(jù)的機(jī)會(huì)，以獲得更多驚人的洞察力。
它不僅僅是靈活的，它還可以非常快速地呈現(xiàn)圖表并且易于學(xué)習(xí)。
Chart.js
簡(jiǎn)單的，干凈的，方便使用。
完美的詞來描述 Chart.js 庫。 Chart.js 庫是一個(gè)基于 HTML5 的 JavaScript 庫，用于創(chuàng)建動(dòng)畫、交互式和可自定義的圖表和圖形。使用 Chart.js，你可以輕松地可視化你的混合圖表類型，默認(rèn)情況下創(chuàng)建響應(yīng)式網(wǎng)頁。
該庫允許你快速開始可視化數(shù)據(jù)。 易于設(shè)置，對(duì)初學(xué)者友好。 有了它，你就不必參與瀏覽器兼容性問題，因?yàn)樗С峙f版瀏覽器。
Chartist
如果你希望創(chuàng)建美觀、響應(yīng)迅速、易于閱讀的圖表，Chartist 是你可以使用的庫。Chartist 使用 SVG 來渲染圖表，它還提供了使用 CSS 媒體查詢和創(chuàng)意動(dòng)畫自定義圖表的功能，你可以把你所有的創(chuàng)造力帶到你的圖表中。
Chartist 非常易于配置，并且易于使用 Sass 進(jìn)行自定義。 然而，它不像Chart.js 那樣支持舊版瀏覽器。你可以通過使用 CSS 樣式來美化你的 SVG 并創(chuàng)建你想要的所有可愛的動(dòng)畫。
C3.js
就像 TauCharts 一樣，C3 是另一個(gè)非常高效的基于 D3 的圖表可視化庫，另外，它允許你創(chuàng)建可以根據(jù)個(gè)人喜好輕松定制的課程。
使用此圖表庫，即使在第一次渲染之后，你也可以通過創(chuàng)建回調(diào)來更新圖表。使用這個(gè)庫很容易找到自己的方法，因?yàn)樗€允許你為 Web 應(yīng)用程序創(chuàng)建可重用的圖表，從而減少了要完成的工作。
HighCharts
使用 HighCharts.js 讓你的數(shù)據(jù)栩栩如生。你可以使用純 JavaScript 創(chuàng)建交互式圖表，當(dāng)你嘗試將交互式圖表添加到你的 Web 應(yīng)用程序時(shí)，它可以使用 SVG 輕松呈現(xiàn)并與 HTML5 完美配合。
它非常輕量級(jí)，因?yàn)樗恍枰魏尾寮?/span> 這并不比其他圖表庫效率低。 你可以創(chuàng)建任何你能想到的圖表，無論是柱形圖、條形圖、餅圖還是極坐標(biāo)圖，而無需將內(nèi)存放在線上。
盡管 HighCharts 非常簡(jiǎn)單，但它也與舊瀏覽器非常兼容，因此如果你不需要使用高級(jí)圖表樣式表示數(shù)據(jù)，則可以選擇它。
除了本文中討論的六個(gè)庫之外，還有很多其他庫，很難從這些庫中選擇最好的，因?yàn)樗鼈兌际歉哔|(zhì)量的庫。
了解更多
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
