使用 Angular Material 和 ng2-Charts 创建响应式仪表板
Angular 9 中的原理图是代码生成器，可以使用预定的模板和布局在项目中创建组件和模式。在本文中，Zara Cooper 解释了如何利用 Angular Material 和 ng2-charts 中的原理图来大幅减少构建仪表板所需的时间和工作。 从头开始创建仪表板通常非常复杂。您必须创建工具来收集感兴趣项目的数据。收集后，必须以易于理解且有意义的方式向用户呈现这些数据。它涉及对要包含哪些数据以及如何有效显示数据的复杂规划。一旦制定了计划，实施设计就是一项艰巨的任务，特别是因为它涉及构建多个组件。 借助 Angular Material 和 ng2-charts，您可以利用原理图来减少构建仪表板所需的工作量和时间。Angular Material 附带了许多可用于生成仪表板的原理图。同样，ng2-charts 提供了生成多个图表组件的原理图。
在本文中我将演示如何使用
快速设置仪表板。 一个例子 # 为了说明如何构建仪表板，我们将以一家销售包袋、钱包、钥匙扣等皮革制品的在线商店为例。商店老板希望跟踪诸如客户从哪里来到他们的在线商店、他们的产品如何销售、流量来源与销售的关系等信息。 我们将构建一个仪表板来显示这些信息并帮助店主分析它。仪表板将包含四张小摘要卡、四种不同 克罗地亚手机号码列表 类型的图表以及一个列出最近订单的表格。四张汇总卡将显示销售总收入、平均订单价值、订单总数和回头客数量等信息。这些图表将显示每种产品的销量、按流量来源划分的销量、一段时间内的在线商店会话以及一周的销量。在本文后面的屏幕截图中，将省略此导航组件，以更好地突出显示我们将在本教程中生成的仪表板。如果您在构建此仪表板时一直在进行操作，则导航仍将如上图所示显示在浏览器中，其中包含仪表板。
生成的图表组件附带已插入
的示例数据。如果您有提供自己数据的预先存在的服务，则可以将这些数据添加到图表组件中。这些图表采用 x 轴标签、数据或数据集、图表类型、颜色、图例以及其他自 AERO 领先 定义选项。要向图表提供数据和标签，请创建一个服务，该服务将从您选择的源获取数据并以图表接受的形式返回数据。例如，的方法nt从 的 方法接收其数据集和标签，该方法返回当年每个月的销售额数组。您可以在此处找到此服务及其返回的数据。将服务作为私有财产注入到构造函数。调用从生命周期挂钩内的服务返回所需图表数据的方法ngOnInit。
