作者?|?arthur puszynski

來源?|?Medium

編輯?|?代碼醫生團隊

首先，簡要介紹一下：

隨著數據收集和使用持續呈指數級增長，對這些數據進行可視化的需求變得越來越重要。開發人員尋求將數百萬個數據庫記錄整合到美麗的圖表和儀表板中，人類可以快速直觀地解釋這些記錄。

數據可視化技術在過去十年中不斷改進，現在消費者可以使用許多高級圖表庫。在21世紀初期，圖表生成由服務器端圖像位圖圖表主導。Flash和Silverlight等插件提供了更具交互性的圖表體驗，但下載速度，電池壽命和系統資源都很重要。

隨著移動和平板電腦使用量的激增，主要平臺不再支持插件，開發人員不得不轉向可以在任何地方運行的開放客戶端技術。與此同時，高分辨率屏幕的出現以及通過觸摸手勢進行更常見的縮放，使分辨率獨立的矢量圖表成為最前沿。

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

D3.js

https://d3js.org/

D3.js是一個非常廣泛和強大的圖形JavaScript庫。它允許您將任意數據綁定到文檔對象模型(DOM)，然后將數據驅動的轉換應用于文檔。

D3遠遠超出了典型的圖表庫，包括許多其他較小的技術模塊，如軸，顏色，層次結構，輪廓，緩動，多邊形等。所有這些都使得學習曲線陡峭。

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

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

D3.js是開源的，可以免費使用。

JSCharting

https://jscharting.com/

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

圖庫分為圖表類型和要素樣本。圖表樣式經過拋光處理，產生了一些干凈的圖表。整體視覺效果提供了清晰而專業的圖表體驗。

包含的示例使用配置對象來自定義圖表。創建和控制圖表類型的設置非常易于使用。指定更復雜的圖表類型需要很少的屬性設置，而JSCharting具有強大的動態默認值，這意味著它會嘗試自動為場景選擇最佳設置。

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

JSCharting可免費用于非商業和個人用途，并提供商業許可選項，包括所有圖表類型和產品，只需一次性費用。

Highcharts

https://www.highcharts.com/

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

該圖表使用配置選項來創建圖表，API易于使用。

Highcharts可免費用于非商業和個人用途。其他用途和庫存需要商業許可，地圖和甘特圖是單獨許可的。

amCharts

https://www.amcharts.com/

amCharts最近發布了他們的第4版，增加了一個強大的SVG動畫引擎，可以創建類似電影的場景。

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

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

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

谷歌圖表

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

Google圖表功能強大且易于使用。

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

每種圖表類型都有一個帶有實例的專用教程。這些教程包括相關功能和API列表的代碼。這是一個開始使用新圖表庫的愉快體驗。

使用配置選項對象自定義圖表。使用DataTable類填充數據集，可以由所有圖表使用。每種圖表類型都有特定類型教程中列出的唯一選項。屬性命名是標準化的，許多選項適用于所有類型。

谷歌圖表是免費的，但有一點需要注意。它是一種Web服務，無法在本地托管。過去，谷歌已退役API，因此，如果您的使用是關鍵任務，您可能需要選擇其他選項。

ZingChart

https://www.zingchart.com/

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

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

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

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

ZingChart可以免費使用品牌。付費許可適用于非品牌使用。

FushionCharts

https://www.fusioncharts.com/

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

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

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

圖表是使用基于配置的選項創建的，并且相對易于使用。在深入研究API時，屬性列表可能會很長。所有配置屬性都很淺，例如{chartLeftMargin，showAlternateHGridColor}。這似乎是嘗試改進代碼完成。

FusionCharts可免費用于圖表品牌的個人用途。付費許可可用于非品牌和商業用途。

KOOLCHART

https://www.koolchart.com/

KoolChart是一個基于HTML 5畫布的JavaScript圖表庫。還提供映射和網格產品。

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

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

API已詳細記錄，每個屬性都有示例圖表。還提供173頁PDF手冊。

兩個月的試用期可供評估。試用期結束后需要許可。

chart.js

https://www.chartjs.org/

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

樣本視覺效果相當現代，并且在首次繪制時包含初始動畫。在實時添加系列或數據點時，它可以平滑動畫。可以在調用update()函數重繪圖表之后修改圖表選項。

示例源代碼未顯示在網站庫中，但可在GitHub存儲庫中找到。配置選項用于創建和修改圖表。選項API簡潔直觀。

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

Chart.js是一個開源庫，可以免費用于個人和商業用途。對于更高級的儀表板要求，有限數量的類型可能是一個問題。

結論

JavaScript圖表庫的生態系統在過去十年中發生了很大變化。如今有大量的圖表產品可滿足各種不同的需求，通過數百種圖表類型為各種項目提供服務。大多數庫提供免費試用版或品牌版，使您能夠使用自己的數據，加載和項目復雜性來評估圖表的有效性。

大多數圖表庫很容易處理簡單的策劃數據集和靜態可視化。但是，當可視化真實世界的動態數據時，圖表可能無法始終順利處理。可能需要做更多的工作來調整和排列元素，以便圖表看起來正確，并且當新的動態數據可視化時，這種手動調整可能會中斷。

要根據您的獨特需求選擇最佳的JS圖表解決方案，我建議您針對上面列出的幾個庫測試您自己的數據，以確保適合您當前和未來的項目。

推薦閱讀

使用D3.js進行交互式數據可視化

關于圖書

《深度學習之TensorFlow：入門、原理與進階實戰》和《Python帶我起飛——入門、進階、商業實戰》兩本圖書是代碼醫生團隊精心編著的 AI入門與提高的精品圖書。配套資源豐富：配套視頻、QQ讀者群、實例源碼、 配套論壇：http://bbs.aianaconda.com?。更多請見：https://www.aianaconda.com

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。