1. 前言
如今拐邪，數(shù)據(jù)分析是任何業(yè)務(wù)應(yīng)用程序的重要組成部分扎阶。這有助于企業(yè)做出重要決策技俐。以易于理解和交互的方式表示大量數(shù)據(jù)非常重要。
圖表對(duì)于美觀、易于理解和交互式的數(shù)據(jù)可視化非常有用贱勃。
JavaScript 中有不同的開源和付費(fèi)圖表庫贵扰，可以實(shí)現(xiàn)漂亮的數(shù)據(jù)表示。
在本文中戚绕，我們將研究幾款美觀的, 易于交互的Angular圖表庫舞丛。
首先，我們將看到開源Angular圖表庫谷誓，稍后我們將研究其他付費(fèi)Angular圖表庫.
2. npm趨勢(shì)圖
以下是近五年(as of 2023-09-04)的npm趨勢(shì)圖
以及狀態(tài)圖
從圖中我們可以看出, ng2-charts是比較老牌的angular圖表庫, 而且一直保持著較好的增長(zhǎng). 后起之秀highcharts-angular發(fā)展也比較迅猛.
ngx-echarts一直保持著穩(wěn)步增長(zhǎng). 從活躍度來看ng2-charts更新一直比較活躍.
注意以上圖中, 沒有將PrimeNG/Charts加入到比較, 因?yàn)镻rimeNG/Charts是PrimeNG這個(gè)大包里面的一個(gè)模塊, npmtrends不支持將模塊添加到比較行列.
而將整個(gè)PrimeNG添加到比較行列對(duì)其它c(diǎn)harts庫又不太公平, 所以請(qǐng)自行判斷PrimeNG/Charts在整個(gè)Angular chart libs中的地位和發(fā)展.
3. 最佳開源Angular圖表庫
以下是使用Angular技術(shù)封裝的最佳開源圖表庫
- ng2-charts
- ngx-echarts
- PrimeNG Charts
- ngx-charts
- angular-plotly.js
4. ng2-charts
ng2-charts是經(jīng)過Angular包裝的基于Chart.js的 Angular指令(directive)
Chart.js 是一個(gè)流行的開源JavaScript圖表庫, Chart.js 使用 HTML5 畫布捍歪，可在所有現(xiàn)代瀏覽器（IE11+）上提供出色的渲染性能。
ng2-charts它提供了便于集成到Angular應(yīng)用程序中的原理圖庐镐。
4.1. Ng2-Charts功能
圖表類型:
ng2-charts 支持 8 種圖表類型：
- 折線圖
- 條形圖
- 雷達(dá)圖
- 餅圖
- 面積圖
- 圓環(huán)圖
- 氣泡圖
- 散點(diǎn)圖
定制化:
- 圖例(Legends)
- 標(biāo)簽
- 顏色
- 提示條(Tooltip)
- 主題(Theming)
- 組合圖表(Combine Charts)
- 選項(xiàng)(Options)
在這里查看Angular 13 中帶有 ng2-charts 的很棒的圖表
5. ngx-charts
ngx-charts是 Angular2+ 的聲明式圖表框架变逃。
它使用 Angular 來渲染和動(dòng)畫 SVG 元素韧献，并利用Angular所有的綁定和速度優(yōu)勢(shì)，并使用 d3 來實(shí)現(xiàn)出色的數(shù)學(xué)函數(shù)璧针、比例渊啰、軸和形狀生成器等。
通過讓 Angular 完成所有渲染绘证，它為我們帶來了 Angular 平臺(tái)提供的無限可能性嚷那，例如 AoT、Universal 等魏宽。
ngx-charts 允許我們使用 CSS 自定義樣式队询。我們還可以使用 ngx-charts 組件創(chuàng)建自定義圖表。
以下是一篇很好的關(guān)于如何在Angular項(xiàng)目中使用Ngx-Charts的文章How To Use Ngx-Charts In Angular Application ?
5.1. ngx-charts功能
-
圖表類型
- 水平和垂直條形圖(bar charts)
- 線型圖(line)
- 面積圖(Area)（標(biāo)準(zhǔn)铆惑、堆疊送膳、歸一化）
- 餅圖(Pie)（可爆炸、網(wǎng)格逆趋、自定義圖例）
- 氣泡圖(bubble)
- 油炸圈餅(Doughnut)
- 儀表盤(Gauge)（線性和徑向）
- 熱圖(Heatmap)
- 樹形圖(Treemap)
- 數(shù)字卡片圖(Number Cards)
-
定制化
- 自動(dòng)縮放
- 時(shí)間線過濾(Timeline Filtering)
- Line Interpolation
- 可配置的軸標(biāo)簽
- 圖例(Legends)（標(biāo)簽和漸變）
- 可定制的標(biāo)簽位置
- 實(shí)時(shí)數(shù)據(jù)支持
- 可定制的工具提示
- 數(shù)據(jù)點(diǎn)事件處理程序(Data point Event Handlers)
- 應(yīng)用主題(Theming)
- 可以配合ngUpgrade一起升級(jí)
6. Ngx-Echarts
ngx-echarts是經(jīng)過Angular包裝的基于ECharts (3.x+) 的 Angular指令(directive)
ECharts是一個(gè)開源的晒奕、基于Web的、跨平臺(tái)的框架魄眉，支持交互式可視化的快速構(gòu)建。
ECharts在 github 上擁有 39.6k star 和 13.2k fork岩梳，被視為全球領(lǐng)先的可視化開發(fā)工具晃择，在 GitHub 可視化類別中排名第三。
它可以在PC和移動(dòng)設(shè)備上流暢運(yùn)行列疗。它與大多數(shù)現(xiàn)代網(wǎng)絡(luò)瀏覽器兼容浪蹂，例如IE8/9/10/11、Chrome古劲、Firefox缰猴、Safari等。ECharts 依賴圖形渲染引擎 ZRender來創(chuàng)建直觀胰舆、交互式和高度可定制的圖表蹬挤。
6.1. Ngx-Echarts功能
-
圖表類型
- 線型圖系列
- 條形圖系列
- 散點(diǎn)圖系列
- 餅圖
- 燭臺(tái)圖系列
- 統(tǒng)計(jì)箱線圖系列
- Map系列
- 熱圖系列
- 方向信息線系列
- 關(guān)系圖系列
- 樹狀圖系列
- 旭日?qǐng)D系列
- 多平行系列尺寸數(shù)據(jù)
- 漏斗系列
- 量具系列
-
定制化
- 加載處理(Loading Handling)
- 事件處理(Event Handling)
- 數(shù)據(jù)實(shí)時(shí)更新
- 初始選項(xiàng)(Initial Options)
- 自動(dòng)調(diào)整大小(Auto Resize)
- 應(yīng)用主題
- 圖表連接(Connect Charts)
- 可拖拽圖表
- 3D圖表
請(qǐng)參閱ECharts 文檔以獲取更多自定義信息焰扳。
在此處查看使用 NGX-ECHARTS 在 Angular 中使用 ECharts 進(jìn)行數(shù)據(jù)可視化 （帶有 COVID Tracker 示例應(yīng)用程序）误续。
7. Angular-Plotly
Angular-plotly是來自plotly 的plotly.js Angular組件。
它支持 Angular 9.x育瓜，如果您想與 Angular 8.x 一起使用栽烂，請(qǐng)使用版本angular-plotly.js@1.x
plotly.js構(gòu)建于d3.js和stack.gl之上恋脚，是一個(gè)高級(jí)聲明性圖表庫糟描。plotly.js 附帶 40 多種圖表類型书妻，包括科學(xué)圖表、3D 圖表见间、統(tǒng)計(jì)圖表工猜、SVG 地圖、金融圖表等荒辕。Plotly.js 在 github 上有 1.12 萬顆星和 1.3 萬個(gè)分支犹褒。
7.1. Angular-Plotly.Js的功能
基本圖表：
散點(diǎn)圖、條形圖李皇、折線圖宙枷、餅圖、氣泡圖卓囚、點(diǎn)圖诅病、填充面積圖、水平條形圖蝇棉、旭日?qǐng)D芥永、桑基圖板辽、點(diǎn)云、多圖表類型統(tǒng)計(jì)圖表：
誤差線链患、箱線圖瓶您、直方圖、二維密度圖贸毕、平行類別圖夜赵。金融圖表：
瀑布圖、指標(biāo)摊腋、燭臺(tái)圖嘁傀、漏斗圖和漏斗面積圖。地圖：
Mapbox 地圖圖層橙凳、Mapbox 密度熱圖笑撞、Choropleth Mapbox、地圖上的線條等坚踩。3D 圖表：
3D 散點(diǎn)圖瓤狐、帶狀圖、3D 曲面圖、3D 網(wǎng)格圖等
定制化:
- 下載為 SVG / PNG
- 數(shù)據(jù)導(dǎo)出
- 事件處理
- 自動(dòng)調(diào)整大小(Auto Resize)
- 滾動(dòng)(Scroll)
- 縮放(Zoom)
- 篩選(Filter)
- 動(dòng)效(Animation)
- 分組(Group by)
8. primeng/chart
PrimeNg/Charts組件基于Charts.js 2.7.x郁稍，這是一個(gè)基于開源 HTML5 的圖表庫胜宇。
PrimeNG是 Angular 的豐富 UI 組件的集合恢着。所有小部件都是開源的掰派，可以在 MIT 許可下免費(fèi)使用左痢。
8.1. PrimeNG/Charts功能
圖表類型:
目前有 6 個(gè)選項(xiàng)可供選擇；餅圖略步、圓環(huán)圖定页、折線圖（折線圖或水平條形圖）、條形圖杭煎、雷達(dá)圖和極面積圖卒落。
定制化:
- 響應(yīng)式(Responsive)
- 事件處理
- 標(biāo)簽
- 圖例(Legends)
- 提示條(Tooltip)
- 寬度和高度
- 選項(xiàng)（參考 Chart.js 文檔）
9. Angular Google Charts
angular-google-charts是為 Angular 6 和 7 編寫的Google Charts庫的包裝器(wrapper)导绷。
Google 圖表工具功能強(qiáng)大、易于使用且免費(fèi)妥曲。
注意：Google Charts 是免費(fèi)的檐盟，但不是開源的。Google 的許可不允許您在您的服務(wù)器上托管他們的 JS 文件导犹。因此羡忘，如果您是企業(yè)并擁有一些敏感數(shù)據(jù)，Google Charts可能不是最佳選擇节猿。
10. Highcharts Angular
Highcharts Angular是 Angular 的官方Highcharts包裝器(wrapper)。
Highcharts 是一個(gè)基于 SVG 的現(xiàn)代多平臺(tái)圖表庫。它擁有豐富的圖表集合叮叹。
Highcharts 對(duì)于非商業(yè)用途是免費(fèi)的，對(duì)于商業(yè)用途是付費(fèi)的。
11. Angular Fusion Charts
angular-fusioncharts是 FusionCharts JavaScript 圖表庫的簡(jiǎn)單且輕量級(jí)的官方 Angular 組件。angular-fusioncharts 使您能夠輕松地在 Angular 應(yīng)用程序中添加 JavaScript 圖表宪拥。
FusionCharts是一個(gè) JavaScript 圖表庫她君，擁有餅圖、柱形圖缔刹、面積圖校镐、折線圖、雷達(dá)圖等圖表以及 150 多種其他用于 Web 應(yīng)用程序的圖表从祝。
Fusion Charts 提供商業(yè)用途的付費(fèi)許可引谜。
12. 相關(guān)文章
最新更新以及更多Angular相關(guān)文章請(qǐng)?jiān)L問 鵬叔的技術(shù)博客空間 - Angular
13. 總結(jié)
在本文中，我們看到了五個(gè)最好的開源Angular圖表庫和其他付費(fèi)Angular圖表庫毒涧。本文原文位于鵬叔的技術(shù)博客空間 - Angular圖表庫介紹, 若要獲取最近更新請(qǐng)?jiān)L問原文.
