Angular 2+中的图表

Question

我想创建一个类似于我附加的图片或者是柱状图。我正在使用Angular 4，对于在Angular中创建图表没有任何了解。是否有参考链接或示例代码可用？

[![Graph][1]][1]

- user8631713

Answer 1

我的建议如下：

1. Ng-Charts
2. D3.JS
3. PrimeNG有一个图表部分
4. Dagre.js 用于有向无环图 (不幸的是使用 JavaScript)
5. Ngx-graph 用于美观的有向无环图，但缺乏文档和支持
6. ngx-charts 来自于 swimlane
7. HighCharts
8. Cytoscape.js 用于有向图
9. mermaidjs
10. Canvas.js - Angular 版本的图表而非 HTML。

- Shan-Desai

---

我的建议是创建一个REST API来从MongoDB中获取JSON格式的信息，然后在Angular中使用这个JSON来展示前端数据。我认为这是可行的。开始寻找MongoDB查询中的REST API。 - Shan-Desai

谢谢。你知道我附加的地图的名称吗？ - user8631713

ng-charts似乎只有部分图表可用...您能否建议其他作为d3.js包装器的东西，我们可以绘制几乎所有类型的图表... - Amrit

我强烈建议在这方面坚持使用 d3.js。我一直在寻找这样的库，但没有任何突破。几乎所有的图表都可以用它来实现。 - Shan-Desai

@amrit https://swimlane.github.io/ngx-charts/ 是一个用于 ng2 的 d3.js 封装。 - Alex T

Answer 2

你可以使用Plotly.js。这不是一个Angular模块，但可以在你的Angular应用程序中使用。这就是我所使用的。

还有eCharts，我曾经使用过它，它非常强大，并且具有良好的用户界面。

- Ulrich Dohou

Answer 3

我们可以使用Syncfusion angular-charts来实现您的要求。 有关 Syncfusion angular-charts 的更多详细信息，请查阅附加的演示和FT链接。

示例: https://stackblitz.com/edit/angular-zo5arc?file=src/app/app.module.ts 截图: FT: https://www.syncfusion.com/angular-ui-components/angular-charts 演示链接: https://ej2.syncfusion.com/angular/demos/#/material/chart/spline UG: https://ej2.syncfusion.com/angular/documentation/chart/getting-started

- Dharanidharan

---

您应该明确指出，Syncfusion是一款需要付费且相当昂贵的产品。我建议您考虑其他回答中提供的免费选项。 - Mr Chow