整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
GitHub精選》是我們分享Github中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的是基于python一個的2D、3D圖表庫——pyecharts。
Pyecharts是一個由百度團隊基于Python和html研發的圖表庫，包含基本的柱狀條形圖、折線面積圖、漏斗圖、旭日圖，以及3D的柱狀圖、折線圖、散點圖、地圖等等，囊括了 30+ 種常見圖表。
特點：
示例：
柱狀圖
熱力圖
旭日圖
3D柱狀圖
3D折線圖
三維地圖①
三維地圖②
快速上手：
pip安裝
$ pip(3) install pyecharts源碼安裝
$ git clone https://github.com/pyecharts/pyecharts.git
$ cd pyecharts
$ pip install -r requirements.txt
$ python setup.py install
# 或者執行 python install.pyfrom pyecharts.charts import Bar
bar=Bar()
bar.add_xaxis(["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])
bar.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
# render 會生成本地 HTML 文件，默認會在當前目錄生成 render.html 文件
# 也可以傳入路徑參數，如 bar.render("mycharts.html")
bar.render()#所有方法均支持鏈式調用
from pyecharts.charts import Bar
bar=(
Bar()
.add_xaxis(["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
)
bar.render()from pyecharts.charts import Bar
from pyecharts.render import make_snapshot
# 使用 snapshot-selenium 渲染圖片
from snapshot_selenium import snapshot
bar=(
Bar()
.add_xaxis(["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
)
make_snapshot(snapshot, bar.render(), "bar.png")from pyecharts.charts import Bar
from pyecharts import options as opts
# 內置主題類型可查看 pyecharts.globals.ThemeType
from pyecharts.globals import ThemeType
bar=(
Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
.add_xaxis(["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
.add_yaxis("商家B", [15, 6, 45, 20, 35, 66])
.set_global_opts(title_opts=opts.TitleOpts(title="主標題", subtitle="副標題"))
)以上就是pyecharts的簡單使用，如果你想實現更多炫酷的樣式，pyecharts同樣也提供了多種內置主題，感興趣的同學可以了解一下。
GitHub：https://github.com/pyecharts/pyecharts
往期推薦：
機器學習入門教程tutorials
零代碼搭建多種主題的個人博客
程序員通用簡歷模板ResumeSample
互聯網公司常用框架和中間件源碼解析
作者 | 董葉
公司決策層會圍繞著數據來制定相應的策略，數據的重要性與日俱增，政府、金融機構、互聯網大廠正在以前所未有的速度收集數據，面對撲面而來的數據，沒有抽象、視覺層的幫助，我們很難快速理解掌握其中信息，正確的圖形工具往往是致勝的關鍵
對于JS開發人員而言，數據可視化能力和開發網頁一樣重要，特別是需要將兩者結合起來的時候，在大數據時代，在網頁中顯示數據統計圖表，從而能很直觀地了解數據的走向。
隨著JavaScript 在數據可視化方向的日益普及，涌現出一大批JavaScript圖形庫為前端網頁創建精美的圖表，但是如何選擇合適JavaScript 圖形庫需要考慮許多因素：
1 想構建什么樣的圖表？餅圖、地圖、線條、條形圖？
2 數據集有多大？ 基于 SVG 的庫通常更適合中小型數據集，基于Canvas 則是大型數據集更可靠的選擇。
3 應用程序是用于Web、移動還是兩者兼而有之？
4 使用的JavaScript 框架？
5 何時使用對應的圖形庫？ 如果是自有研發，前期成本高，但是后期可塑性強。
百度和谷歌都開發了對應的圖形庫，Echart、Google Charts , 以下介紹的幾款圖形庫有著各自不同的特點。
D3是最受歡迎的JS圖形庫之一，不僅用于數據可視化，還用于動畫、數據分析、地理和數據實用程序。
通過HTML、SVG和CSS將數據鮮活形象地展示出來，它的所有操作都是真實的DOM操作，是和React或Vue 等現代前端框架完全不同的思路， 基于一整套數據到SVG屬性的計算框架和豐富的工具包， 即使不理解SVG屬性計算公式的程序員也能輕松將數據轉換成想要的SVG屬性。
D3 解決問題核心是基于數據的高效文檔操作。提供了非凡的靈活性。
使用最小的開銷，使得D3的速度非?？欤С执笮蛿祿约敖换ヅc動畫的動態行為。
D3的函數風格允許通過各種組件和插件的形式進行代碼的重用。
D3 缺點是它有一個陡峭的學習曲線，文檔已經過時并且導航混亂，上手要比其他框架困難。
D3 GitHub
D3 畫廊
一組專門為React 和 React Native設計的模塊化圖表組件。
Victory很好地提供了創建圖表的基礎。軸自定義、標簽、為單個圖形傳遞不同的數據集之類的事情都非常簡單，并且調整樣式和行為非常簡單直觀。
它非常有效，可以讓您用最少的代碼構建一些漂亮的圖表。絕對值得檢查跨平臺應用程序。
Victory GitHub
Victroy畫廊
它是 Uber創建的一個簡單的JavaScript 圖形可視化庫，它允許你創建所有常用類型的圖表：條形圖、樹形圖、線形圖、面積圖等。
它的API 非常簡單，并提供了很大的靈活性。它很輕，動畫簡單但流暢。它還允許您根據現有元素編寫自定義圖表。
盡管關于React-Vis的內容并不多，但文檔簡單易讀。
React-vis GitHub
React-vis 示例
它是React Native的數據透視表組件，對習慣了Excel分析風格的業務人員十分友好，并且能與React和其他框架很好地兼容，適合需要聚合、排序和過濾功能的數據報告。
它可以在Web 瀏覽器中免費使用，支持Microsoft Analysis Services OLAP多維數據集，Mondrian，icCube，Salesforce，SAP，SQL（MS SQL，MySQL和許多其他）靜態數據庫或者CSV文件。
可以在客戶端瀏覽器處理多達100MB的數據文檔以及龐大的OLAP多維數據集信息量，非常適合用于商業智能（BI）信息評估。
一個非常流行的開源庫，在GitHub 上擁有超過4萬顆星。它是輕量級的，可以使用HTML5 Canvas元素構建響應式圖表。輕松混合和匹配折線圖和條形圖以組合不同的數據集，這是一個非常棒的功能。
Chart.js 默認提供六種不同的圖表類型，它也是很多公司處理超大數據集的首選庫。操作簡單、對初學者友好。絕對是最有趣的開源庫之一。
GitHub 上的
Chart.js Chart.js 示例
最熱門的商業圖表庫之一?；谄渚赖脑O計使，amCharts將Apple、Amazon、NASA和許多其他知名公司列為他們的客戶，amCharts是一種商業工具，每個網站許可證的起價為180 美元。
作為回報，使用者可以獲得所需的所有類型的圖表，包括地理地圖和出色的客服支持，響應時間平均不到3小時。
對于大公司來說，這是一個很好的解決方案。對于小公司或者個人用戶，amCharts 也支持免費下載，唯一的限制是會在圖表的左上角顯示該網站的鏈接。
適用于：Angular、React、Vue.js、普通 JS 應用程序、TypeScript
amCharts GitHub
amCharts 網站
自稱為“世界上最具交互性的JavaScript圖表庫”。除了反應性，它主要關注多點觸控手勢和各種設備的原生感覺。
即通過放大或者縮小來與圖表進行物理交互，從而在不同數據粒度進行切換，支持數據圖表的聯動，對任何一個圖表的過濾操作，會在其他圖表中響應。
該庫承諾提供漂亮的可視化效果，只需很少的代碼，并且可以輕松部署在產品中。
ZoomChatrts在默認設置下，使用相同的數據和設置，運行速度比基于 SVG 的競爭對手快 20倍。
這是因為ZoomCharts從一開始就是為了處理和可視化大數據構建，支持在同一個圖表混合多個數據源，通過數據存儲和展示分開，輕松集成數據的下鉆聚合操作。
Zoomcharts 網站
Zoomcharts 畫廊
JavaScript圖形世界中有很多機會，這些豐富的圖形庫可以協助大家完成復雜的數據分析工作，通過抽象的視圖層解讀數據，幫助企業挖掘數據價值。
越來越多的圖形庫證明了數據可視化對于整個Web的重要性——希望上面的介紹能幫助相關項目開發者創建漂亮的數據化解決方案。
私信我領取目標檢測與R-CNN/數據分析的應用/電商數據分析/數據分析在醫療領域的應用/NLP學員項目展示/中文NLP的介紹與實際應用/NLP系列直播課/NLP前沿模型訓練營等干貨學習資源。
數據時代，收集和使用數據的需求正在爆發式增長，數據可視化也變得愈加重要。開發人員在想方設法將不同數據庫中的記錄整合到儀表板和漂亮的圖表中，向人們快速直觀地展示信息。
在過去十年中數據可視化技術不斷改進，結果涌現了很多高水平的圖表庫。
21 世紀初期，人們使用服務端圖像位圖來生成圖表。那時像 Silverlight 和 Flash 這樣的插件提供了豐富的交互式圖表體驗，代價是減少電池壽命、拖慢下載速度并耗費更多系統資源。
移動設備興起之后，移動平臺不再支持插件并開始轉向開放客戶端技術，這些技術可以在任何平臺上運行，成為了開發人員的首選。同時，觸摸手勢縮放和非常高分辨率的屏幕開始流行，使得無關分辨率的矢量圖表廣受歡迎。
隨之而來的就是數據可視化的時代，SVG 可擴展矢量圖像和 JavaScript 成為主角。今天的圖表技術可支持所有瀏覽器平臺，支持交互性和動畫，并且不需要特殊的插件。這些圖表在高分辨率設備中也有很好的顯示效果。我們可以在 JS 開發中使用許多 JavaScript 圖表庫實現這些目標。
市面上有很多 JavaScript 圖表庫，本文則列出了其中的幾款佼佼者，可以用在你的新項目中。
以下就是 2019 年的頂級 Javascript 圖表庫名單。
D3.js
D3.js（https://d3js.org/）是一個圖形 JavaScript 庫，功能眾多，十分強大。你可以用它對文檔做數據驅動的轉換，然后將任意數據綁定到 DOM 上。
D3 是非常優秀的圖表庫。它有一些較小的技術模塊，如顏色、軸、輪廓、層次結構、多邊形、緩動等。這也意味著你需要學習很多知識才能用好它，上手并不容易。
即使用它創建簡單的圖表也可能需要復雜的步驟。你需要明確定義包含圖表項和軸在內的所有元素。它提供了一些示例，教你如何使用 CSS 來設置圖表元素的樣式。開發者無法自動應用基于圖表的功能。
如果你想從零開始設計復雜的圖表，完全按照自己的想法控制所有元素，那么這個庫就是你的首選。但如果時間緊迫，從頭開始解決數據可視化項目需求可能就不是什么好主意了。
作為圖表庫來說，D3.js 可以充當構建塊。開發者可以用 D3 與 NVD3 一類的方案配合工作。這個圖表庫完全免費并開源。
Highcharts
Highcharts（https://www.highcharts.com/）是市面流行的 JavaScript 圖表庫之一，并被許多大公司采用。為了提供對 IE6 到 IE8 的兼容性，它先使用 SVG 然后轉向 VML 來生成圖表。它的示例圖表帶有一些很棒的功能，但看起來不怎么吸引人。它的文檔里有很多 API 文檔教程和相關主題。
它的 API 易于使用，開發者可以使用配置選項來開發圖表。對于個人和非商業用途，Highcharts 可免費使用；證券行業等用途需要商業許可，而甘特圖和地圖圖表則需要單獨的許可證。
Chart.js
Chart.js（https://www.chartjs.org/）是一個開源 JavaScript 庫，支持 8 種類型的圖表。它只有 60kb，是一個非常小的 JS 庫。它支持的圖表類型包括雷達、內聯圖表、餅圖、條形圖、散點圖、面積圖、氣泡和混合等。它還支持時間序列。在呈現層面，它使用 canvas 元素并能響應窗口大小調整縮放比率。它對 IE9 向后兼容。要兼容 IE7 的話也可以使用 Polyfills。
初次使用它的示例時還能看到現代感的初始動畫。實時添加數據點或序列時有平滑的動畫效果。你可以調用 update() 函數來修改圖表選項并重繪圖表。
在它的網站中沒有展示示例源代碼，但可以在 GitHub 倉庫中找到。它的 API 簡潔直觀。用戶使用配置選項來創建和修改圖表。它的文檔內容翔實，附帶代碼片段和屬性 API 的教程。
這個庫可免費用于商業和個人用途。它是開源項目。但對于更高級別的需求來說，它提供的圖表類型可能有點少。
amCharts
amCharts（https://www.amcharts.com/）已經推出了第 4 版，歷史也挺長了。此版本支持 SVG 動畫引擎，可幫助開發人員創建電影級場景。
它的示例圖表非常漂亮，大多數示例都提供了滑塊 UI，還附帶許多調節器可以實時調整圖表的變量。它的文檔包括完整的 API 屬性描述和許多教程。它提供了一個聲明性 API 來創建圖表，與基于配置的方法略有不同。它有很好的代碼自動完成功能，但在配置圖表時需要的代碼略多。amCharts 的水印版圖表是免費的，去掉水印需要付費。
谷歌圖表
谷歌圖表（https://developers.google.com/chart/）功能強大，易于使用。其示例圖表簡潔易讀。可以在它的圖表庫和擴展庫中找到許多圖表類型。通過層疊菜單可以查看更多圖表類型。
每種圖表類型都有附帶動態實例和很容易看懂的專門教程。這些教程附帶 API 列表，并包含相關功能的代碼。它為新人提供了非常愉快的入門體驗。。
用戶可以使用配置選項對象來自定義圖表。DataTable 類用來填充數據集，也可以用在所有圖表里。每種圖表類型都帶有以獨特方式列出的選項和對應的教程?？蛇x項很多，適用于不同類型，而屬性命名是標準化的。
谷歌圖表可以免費使用，但也有一些局限。它是一個 Web 服務，不能在本地托管。谷歌還退役了很多 API，所以它不適合用在關鍵項目中。
ZingChart
ZingChart（https://www.zingchart.com/）中有許多圖表類型，能與 react、angular 等框架集成。它有一系列強大的功能和許多自定義選項。
它的示例圖表有許多樣式主題，其中一些看著很不錯。還有許多選項可以用來添加樣式。示例圖表沒有覆蓋它支持的所有圖表類型。
它的文檔附帶了許多功能教程，覆蓋了所有類型的圖表和全部 API。ZingChart 使用配置選項自定義圖表。示例中有很多屬性設置，如字體樣式等。但這些帶有屬性設置的示例可能會讓用戶糊涂，不知道圖表到底需要哪些設置。
ZingChart 的水印版可以免費使用。付費版沒有水印。
FushionCharts
FusionCharts 最開始是基于 Flash 的圖表插件，有著很長的歷史。它是一個健壯的圖表可視化庫，提供對現代瀏覽器的支持，支持包括 JavaScript、JSON 和 XML 在內的許多數據格式，還兼容 IE6。它還支持許多服務端編程語言和 JavaScript 框架。
它的圖表庫附帶了許多看上去簡潔大方的示例。它的文檔帶有許多良好的 API 描述，而且每種圖表類型都有示例。用戶可以通過任務和圖表功能分組配置屬性。
用戶使用基于配置的選項創建圖表，用起來非常簡單。深入研究 API 時會發現屬性列表變得很長。showAlternateHGridColor、chartLeftMargin 等配置屬性很好理解。它的代碼自動完成功能還有改進的空間。
FusionCharts 的水印版可供個人免費使用。商業和非水印版本需要付費。
Flot
Flot（https://www.flotcharts.org/）用法簡單、外觀漂亮，交互功能豐富，是最優秀的純 JavaScript 繪圖庫。它有效兼容所有新式瀏覽器，包括 Internet Explorer 6 +、Chrome、Firefox 2 +、Safari 3+ 和 Opera 9.5+ 等。它是最流行、歷史最長的圖表庫。Flot 支持線、點、填充區域、條形以及它們的各種組合。
Flot 的工作機制是創建一個可以放入圖表的占位符 div。
Sigmajs
這款產品可以用來創建一些漂亮的圖形來在 Web 上顯示網絡，并在大型 Web 應用中展示簡單的交互式網絡；這種交互式網絡具有動態探索功能。無論對初學者還是高級用戶來說它都很好用。
它配備了一些令人興奮的功能，如 Canvas 和 WebGL 渲染器，還有鼠標和觸摸支持，幫助你制作更好的動態網絡應用。
Sigmajs（http://sigmajs.org/）默認可配置，支持鼠標和觸摸兩種交互，并可以根據容器大小變化縮放顯示。它還有自定義渲染，可以用一組工具和設置來定制網絡的交互細節。
小結
JavaScript 圖表庫生態正在不斷發展壯大。市面上能找到大量圖表制作產品，可以滿足多種多樣的項目需求。大多數產品都提供了免費試用機會，方便用戶評估。
英文原文：https://aglowiditsolutions.com/blog/top-javascript-chart-libraries/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
