官方文档｜Angular 框架集成 Highcharts Dashboards

Angular 框架集成 Highcharts Dashboards

要基于 Angular 创建仪表盘，请按照以下步骤操作：

1. 安装 Dashboards 包

npminstall@highcharts/dashboards

2. 导入 Dashboards 包

importDashboardsfrom'@highcharts/dashboards';

3. 其他包

考虑使用额外的包，比如Highcharts或Grid，以充分发挥 Dashboards 的潜力。

首先，安装选用的包。

npminstallhighcharts

然后，导入该包和专用的插件，将其连接到仪表盘。

importHighchartsfrom'highcharts/es-modules/masters/highcharts.src.js';importDashboardsfrom'@highcharts/dashboards/es-modules/masters/dashboards.src.js';importGridfrom'@highcharts/dashboards/es-modules/masters/datagrid.src.js';Dashboards.HighchartsPlugin.custom.connectHighcharts(Highcharts);Dashboards.GridPlugin.custom.connectGrid(Grid);Dashboards.PluginHandler.addPlugin(Dashboards.HighchartsPlugin);Dashboards.PluginHandler.addPlugin(Dashboards.GridPlugin);

4. 为 Dashboards 创建一个HTML结构

有两种方法可以实现：

使用 Dashboards 布局系统

要做到这一点，首先导入layout模块并初始化它：

import'@highcharts/dashboards/es-modules/masters/modules/layout.src.js';

在要渲染仪表盘的地方添加一个 div：

<divid="dashboard"></div>

你可以通过它的 ID 引用元素，或者使用ElementRef来获取它。

声明你的HTML结构

详细信息请参阅 文档.

5. 创建一个仪表盘

仪表盘是使用工厂函数Dashboards.board.创建的。该函数接受三个参数：

• container- 仪表盘将被渲染的元素，可以是元素的 ID 或者元素的直接引用
• options- 仪表盘的配置对象
• isAsync- 在使用外部数据资源，仪表盘是否应异步渲染功能

演示 Demos

看以下演示，了解它的工作原理：

• 基本实时示例
• 自定义布局实时示例