作者?|?arthur puszynski

來源?|?Medium

編輯?|?代碼醫(yī)生團(tuán)隊(duì)

首先，簡(jiǎn)要介紹一下：

隨著數(shù)據(jù)收集和使用持續(xù)呈指數(shù)級(jí)增長(zhǎng)，對(duì)這些數(shù)據(jù)進(jìn)行可視化的需求變得越來越重要。開發(fā)人員尋求將數(shù)百萬個(gè)數(shù)據(jù)庫記錄整合到美麗的圖表和儀表板中，人類可以快速直觀地解釋這些記錄。

數(shù)據(jù)可視化技術(shù)在過去十年中不斷改進(jìn)，現(xiàn)在消費(fèi)者可以使用許多高級(jí)圖表庫。在21世紀(jì)初期，圖表生成由服務(wù)器端圖像位圖圖表主導(dǎo)。Flash和Silverlight等插件提供了更具交互性的圖表體驗(yàn)，但下載速度，電池壽命和系統(tǒng)資源都很重要。

隨著移動(dòng)和平板電腦使用量的激增，主要平臺(tái)不再支持插件，開發(fā)人員不得不轉(zhuǎn)向可以在任何地方運(yùn)行的開放客戶端技術(shù)。與此同時(shí)，高分辨率屏幕的出現(xiàn)以及通過觸摸手勢(shì)進(jìn)行更常見的縮放，使分辨率獨(dú)立的矢量圖表成為最前沿。

進(jìn)入當(dāng)前由JavaScript和SVG(可縮放矢量圖形)主導(dǎo)的數(shù)據(jù)可視化時(shí)代。圖表現(xiàn)在可以在所有瀏覽器上運(yùn)行，無需特殊插件，支持交互性和動(dòng)畫，即使在最高分辨率的設(shè)備上也能看起來很清晰。回顧了50多個(gè)可視化庫，這9個(gè)產(chǎn)品脫穎而出：

D3.js

https://d3js.org/

D3.js是一個(gè)非常廣泛和強(qiáng)大的圖形JavaScript庫。它允許您將任意數(shù)據(jù)綁定到文檔對(duì)象模型(DOM)，然后將數(shù)據(jù)驅(qū)動(dòng)的轉(zhuǎn)換應(yīng)用于文檔。

D3遠(yuǎn)遠(yuǎn)超出了典型的圖表庫，包括許多其他較小的技術(shù)模塊，如軸，顏色，層次結(jié)構(gòu)，輪廓，緩動(dòng)，多邊形等。所有這些都使得學(xué)習(xí)曲線陡峭。

嘗試創(chuàng)建簡(jiǎn)單的圖表可能很復(fù)雜。需要明確定義包括軸和其他圖表項(xiàng)在內(nèi)的所有元素。許多示例顯示了如何使用CSS來設(shè)置圖表元素的樣式。沒有基于圖表的功能自動(dòng)應(yīng)用。如果你想進(jìn)入雜草并利用創(chuàng)造力來完全控制每一個(gè)元素，那么它是最好的選擇。為了滿足數(shù)據(jù)可視化項(xiàng)目的要求，它可能不是從頭開始的最佳選擇。

D3.js可以是圖表庫的構(gòu)建塊。開發(fā)人員使用D3使其更容易使用消耗它的圖表解決方案，例如NVD3。

D3.js是開源的，可以免費(fèi)使用。

JSCharting

https://jscharting.com/

JSCharting圖表庫支持大量圖表類型，包括地圖，甘特圖，股票和其他通常需要單獨(dú)庫使用的圖表類型。它包括所有世界國家的內(nèi)置地圖和SVG圖標(biāo)庫。一套獨(dú)立的微圖表可以在任何圖表標(biāo)簽或頁面上的任何div元素中呈現(xiàn)。還包括UI控件(UiItems)，允許更豐富的交互式圖表。實(shí)時(shí)控制數(shù)據(jù)或可視化變量非常簡(jiǎn)單，圖表可以導(dǎo)出為SVG，PNG，PDF和JPG格式。

圖庫分為圖表類型和要素樣本。圖表樣式經(jīng)過拋光處理，產(chǎn)生了一些干凈的圖表。整體視覺效果提供了清晰而專業(yè)的圖表體驗(yàn)。

包含的示例使用配置對(duì)象來自定義圖表。創(chuàng)建和控制圖表類型的設(shè)置非常易于使用。指定更復(fù)雜的圖表類型需要很少的屬性設(shè)置，而JSCharting具有強(qiáng)大的動(dòng)態(tài)默認(rèn)值，這意味著它會(huì)嘗試自動(dòng)為場(chǎng)景選擇最佳設(shè)置。

該文檔包含許多教程和全面的API屬性描述。許多屬性包括示例用法和示例鏈接。

JSCharting可免費(fèi)用于非商業(yè)和個(gè)人用途，并提供商業(yè)許可選項(xiàng)，包括所有圖表類型和產(chǎn)品，只需一次性費(fèi)用。

Highcharts

https://www.highcharts.com/

Highcharts是一個(gè)流行的JavaScript圖表庫，被許多世界上最大的公司使用。使用SVG生成圖表并回退到VML，以便向后兼容IE6 / IE8。演示圖表演示了相當(dāng)豐富的功能集，但不會(huì)在視覺上令人驚嘆。一般文檔包括許多相關(guān)主題的教程，API文檔是全面的。

該圖表使用配置選項(xiàng)來創(chuàng)建圖表，API易于使用。

Highcharts可免費(fèi)用于非商業(yè)和個(gè)人用途。其他用途和庫存需要商業(yè)許可，地圖和甘特圖是單獨(dú)許可的。

amCharts

https://www.amcharts.com/

amCharts最近發(fā)布了他們的第4版，增加了一個(gè)強(qiáng)大的SVG動(dòng)畫引擎，可以創(chuàng)建類似電影的場(chǎng)景。

演示圖表看起來非常好。大多數(shù)演示提供了許多調(diào)色板和滑塊UI來實(shí)時(shí)調(diào)整圖表變量。文檔包括許多教程和完整的API屬性描述。

創(chuàng)建圖表與基于配置的方法略有不同，而是使用更具聲明性的API。它需要稍多的代碼來配置圖表，但提供更好的代碼完成體驗(yàn)。

amCharts提供免費(fèi)許可證，包括品牌圖表和其他用途的付費(fèi)許可證。

谷歌圖表

https://developers.google.com/chart/

Google圖表功能強(qiáng)大且易于使用。

樣本圖表看起來很干凈，很容易在眼睛上。圖庫和擴(kuò)展圖庫顯示了許多圖表類型，但按下漢堡菜單會(huì)顯示更多類型(如日歷)，這些類型未在這些圖庫列表中顯示。

每種圖表類型都有一個(gè)帶有實(shí)例的專用教程。這些教程包括相關(guān)功能和API列表的代碼。這是一個(gè)開始使用新圖表庫的愉快體驗(yàn)。

使用配置選項(xiàng)對(duì)象自定義圖表。使用DataTable類填充數(shù)據(jù)集，可以由所有圖表使用。每種圖表類型都有特定類型教程中列出的唯一選項(xiàng)。屬性命名是標(biāo)準(zhǔn)化的，許多選項(xiàng)適用于所有類型。

谷歌圖表是免費(fèi)的，但有一點(diǎn)需要注意。它是一種Web服務(wù)，無法在本地托管。過去，谷歌已退役API，因此，如果您的使用是關(guān)鍵任務(wù)，您可能需要選擇其他選項(xiàng)。

ZingChart

https://www.zingchart.com/

ZingChart提供了許多圖表類型，并集成了角度，反應(yīng)和其他框架。它具有強(qiáng)大的功能集和許多自定義選項(xiàng)。

演示圖表顯示了一系列樣式主題，其中一些看起來比其他主題更好，但是根據(jù)需要設(shè)置樣式的選項(xiàng)就在那里。演示不會(huì)演示所有可用的圖表類型。

文檔包括所有可用類型的教程，大量功能和完整的API列表。

ZingChart使用配置選項(xiàng)來自定義圖表。示例包括許多屬性設(shè)置，如字體樣式。這些可能會(huì)妨礙了解給定圖表所需的設(shè)置。

ZingChart可以免費(fèi)使用品牌。付費(fèi)許可適用于非品牌使用。

FushionCharts

https://www.fusioncharts.com/

FusionCharts作為基于Flash的圖表插件開始存在多年。它是一個(gè)強(qiáng)大的圖表可視化庫。它支持許多數(shù)據(jù)格式，包括XML，JSON和JavaScript，可在現(xiàn)代瀏覽器中使用，并向后兼容IE6。還支持許多JavaScript框架和服務(wù)器端編程語言。

圖表庫包含大量示例，并且具有干凈的視覺外觀。

文檔包括良好的API描述以及每種圖表類型的示例。配置屬性按任務(wù)和圖表功能分組。

圖表是使用基于配置的選項(xiàng)創(chuàng)建的，并且相對(duì)易于使用。在深入研究API時(shí)，屬性列表可能會(huì)很長(zhǎng)。所有配置屬性都很淺，例如{chartLeftMargin，showAlternateHGridColor}。這似乎是嘗試改進(jìn)代碼完成。

FusionCharts可免費(fèi)用于圖表品牌的個(gè)人用途。付費(fèi)許可可用于非品牌和商業(yè)用途。

KOOLCHART

https://www.koolchart.com/

KoolChart是一個(gè)基于HTML 5畫布的JavaScript圖表庫。還提供映射和網(wǎng)格產(chǎn)品。

他們的新v5版本包括更具交互性的功能集和更新的樣式。視覺效果干凈而現(xiàn)代。畫布的使用以犧牲基于柵格為代價(jià)提供了更好的性能。

這些示例使用基于字符串的XML來應(yīng)用圖表選項(xiàng)，這似乎不如其他方法實(shí)用。這些選項(xiàng)看起來像HTML5，但是通過JavaScript字符串設(shè)置。

API已詳細(xì)記錄，每個(gè)屬性都有示例圖表。還提供173頁P(yáng)DF手冊(cè)。

兩個(gè)月的試用期可供評(píng)估。試用期結(jié)束后需要許可。

chart.js

https://www.chartjs.org/

Chart.js是一個(gè)支持8種圖表類型的開源JavaScript庫。這是一個(gè)只有60kb的小型js庫。類型包括折線圖，條形圖，面積圖，雷達(dá)，餅圖，氣泡，散點(diǎn)圖和混合。還支持時(shí)間序列。它使用canvas元素進(jìn)行渲染，并對(duì)窗口大小調(diào)整進(jìn)行響應(yīng)以保持縮放粒度。它向后兼容IE9。Polyfill也可以與IE7一起使用。

樣本視覺效果相當(dāng)現(xiàn)代，并且在首次繪制時(shí)包含初始動(dòng)畫。在實(shí)時(shí)添加系列或數(shù)據(jù)點(diǎn)時(shí)，它可以平滑動(dòng)畫。可以在調(diào)用update()函數(shù)重繪圖表之后修改圖表選項(xiàng)。

示例源代碼未顯示在網(wǎng)站庫中，但可在GitHub存儲(chǔ)庫中找到。配置選項(xiàng)用于創(chuàng)建和修改圖表。選項(xiàng)API簡(jiǎn)潔直觀。

該文檔是完整的，包括有屬性API和代碼片段的教程。

Chart.js是一個(gè)開源庫，可以免費(fèi)用于個(gè)人和商業(yè)用途。對(duì)于更高級(jí)的儀表板要求，有限數(shù)量的類型可能是一個(gè)問題。

結(jié)論

JavaScript圖表庫的生態(tài)系統(tǒng)在過去十年中發(fā)生了很大變化。如今有大量的圖表產(chǎn)品可滿足各種不同的需求，通過數(shù)百種圖表類型為各種項(xiàng)目提供服務(wù)。大多數(shù)庫提供免費(fèi)試用版或品牌版，使您能夠使用自己的數(shù)據(jù)，加載和項(xiàng)目復(fù)雜性來評(píng)估圖表的有效性。

大多數(shù)圖表庫很容易處理簡(jiǎn)單的策劃數(shù)據(jù)集和靜態(tài)可視化。但是，當(dāng)可視化真實(shí)世界的動(dòng)態(tài)數(shù)據(jù)時(shí)，圖表可能無法始終順利處理。可能需要做更多的工作來調(diào)整和排列元素，以便圖表看起來正確，并且當(dāng)新的動(dòng)態(tài)數(shù)據(jù)可視化時(shí)，這種手動(dòng)調(diào)整可能會(huì)中斷。

要根據(jù)您的獨(dú)特需求選擇最佳的JS圖表解決方案，我建議您針對(duì)上面列出的幾個(gè)庫測(cè)試您自己的數(shù)據(jù)，以確保適合您當(dāng)前和未來的項(xiàng)目。

推薦閱讀

使用D3.js進(jìn)行交互式數(shù)據(jù)可視化

關(guān)于圖書

《深度學(xué)習(xí)之TensorFlow：入門、原理與進(jìn)階實(shí)戰(zhàn)》和《Python帶我起飛——入門、進(jìn)階、商業(yè)實(shí)戰(zhàn)》兩本圖書是代碼醫(yī)生團(tuán)隊(duì)精心編著的 AI入門與提高的精品圖書。配套資源豐富：配套視頻、QQ讀者群、實(shí)例源碼、 配套論壇：http://bbs.aianaconda.com?。更多請(qǐng)見：https://www.aianaconda.com

總結(jié)

以上是生活随笔為你收集整理的javascript高级程序设计pdf_2019年最好的JavaScript图表库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。