Highcharts创建具有交互式报表功能的Angular应用程序
Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。
在本入门教程中，您将学习如何创建具有交互式报表功能的Angular应用程序。作为数据可视化工具，您将使用Highcharts（一个多平台图表库）和Flexmonster Pivot（一个JavaScript组件），该组件将获取原始数据，进行处理并将其显示在数据透视表网格上。表格和图表可视化相结合，构成了一个高级分析仪表板。
本教程是您掌握数据可视化和Angular开发技能的绝好机会。
以下是一些可以完成本教程的实际原因：
您将学习如何构建依赖于高级数据可视化组件的动态报告应用程序。
最终的项目将允许其最终用户实时挖掘数据并执行自助服务分析。
先决条件
要成功完成本教程，请在计算机上安装以下工具：
Node.js的本地开发环境。
Angular CLI。
选择您选择的IDE，例如Visual Studio Code。
准备资料
您将不使用理论数据，而是使用经验数据。即，您将设置一个报告仪表板，以通过交互式可视化工具探索COVID大流行趋势。
您可以互换使用任何其他数据集。但是请注意，在这种情况下，您应该根据数据集的字段名称来调整报表的结构。
这是到目前为止我们选择的数据集列表：
约翰霍普金斯大学（covid_19_clean_complete.csv）提供的数据，其中包括截至2020年1月22日来自不同国家的COVID-19 确诊，死亡和康复病例的累计计数。它可用于探索美国或其他国家/地区案件的时间动态。
由约翰·霍普金斯大学提供的美国确诊病例数据（johns_hopkins_csse / 2019-novel-coronavirus-covid-19-2019-ncov-data-repository-confirmed-cases-in-the-us.csv）。它可以用于按州跟踪案件的总数。
您可以下载给定的数据文件，以重现本教程中显示的结果。所有数据集均开放供研究，可在Kaggle平台上免费获得。
储存资料
让我们决定仪表板应如何访问数据。
让我们在src / assets目录中创建一个数据文件夹，我们将在其中存储CSV数据文件。
通过数据可视化思路进行思考
主要目标是关注美国的每日/每周/每月COVID动态。为此，仪表板将包含多个数据可视化组件：
两个数据透视表汇总了来自不同数据源的数据。
显示每个州已确诊病例数的总谱图。
一个气泡图，用于报告不同国家中正在发生和已恢复的病例数。
用于报告美国案件每两周/每周/每月动态的折线图。
建立一个项目
首先，使用Angular CLI创建一个新的Angular项目：
ng new report-app
导航到工作空间目录并启动应用程序：
cd reporting-app
ng serve --open
如果一切设置正确，您应该会看到带有徽标的标准Angular应用程序布局。
安装Highcharts模块
将Highcharts软件包安装到您的应用中：
npm install highcharts --save
安装Flexmonster模块
使用单个npm命令安装Flexmonster Angular模块：
npm install ng-flexmonster
打开src/app/app.module.ts，导入FlexmonsterPivotModule并将其添加到import数组：
import { FlexmonsterPivotModule } from ‘ng-flexmonster’;
@NgModule({
…
imports: [FlexmonsterPivotModule],
…
})
要允许Flexmonster将汇总数据传递给Highcharts，请打开并将Highcharts的数据透视表连接器包括到项目脚本中：angular.json
“scripts”: [: [
“node_modules/flexmonster/lib/flexmonster.highcharts.js”“node_modules/flexmonster/lib/flexmonster.highcharts.js”
]]
将数据透视表的样式导入到：src/styles.css
@import“ flexmonster / flexmonster.min.css” “ flexmonster / flexmonster.min.css”
在此处打开并导入flexmonster和ng-flexmonster TypeScript模块：app.component.ts
import * as Flexmonster from ‘flexmonster’; * as Flexmonster from ‘flexmonster’;
import { FlexmonsterPivot } from ‘ng-flexmonster’;import { FlexmonsterPivot } from ‘ng-flexmonster’;
创建仪表板的组件
由于组件是Angular的基本构建块，因此让我们遵循面向组件的方法，并为将来的仪表板创建一个单独的组件。为此，请在目录内创建一个仪表板文件夹。接下来，在此文件夹中创建三个文件：src/app
Dashboard.component.ts：实现配置数据透视表和图表以及它们之间的交互的所有逻辑。
Dashboard.component.html：描述仪表板的组件如何在页面上呈现。
Dashboard.component.css：包含组件的样式。
打开并导入Flexmonster和Highcharts模块：dashboard.component.ts
import { Component, OnInit, ViewChild } from ‘@angular/core’; { Component, OnInit, ViewChild } from ‘@angular/core’;
import { FlexmonsterPivot } from ‘ng-flexmonster’;import { FlexmonsterPivot } from ‘ng-flexmonster’;
import * as Highcharts from ‘highcharts’;import * as Highcharts from ‘highcharts’;
另外，为地图导入Highcharts模块：
const HC_map = require(“highcharts/modules/map”); HC_map = require(“highcharts/modules/map”);
HC_map(Highcharts);(Highcharts);
require("./js/usamap")(Highcharts);require("./js/usamap")(Highcharts);
要创建地图，请在中添加一个js文件夹并放置脚本。您可以在此处找到其代码。src/app/dashboardusamap.js
为该类定义一个组件装饰器，并为其提供配置元数据：
@Component({({
selector: ‘app-dashboard’,: ‘app-dashboard’,
templateUrl: ‘./dashboard.component.html’,: ‘./dashboard.component.html’,
styleUrls: [’./dashboard.component.css’]: [’./dashboard.component.css’]
})})
Angular需要模板中使用的指令列表以及模板才能呈现它们。为此，只需在中提供URL即可在外部定义模板templateUrl。
接下来，创建一个导出的类：
export class DashboardComponent implements OnInit { class DashboardComponent implements OnInit {
}}
在类声明中定义两个数据透视表实例：
@ViewChild(“pivot”) pivot: FlexmonsterPivot;(“pivot”) pivot: FlexmonsterPivot;
@ViewChild(“pivot2”) pivot2: FlexmonsterPivot;@ViewChild(“pivot2”) pivot2: FlexmonsterPivot;
ngOnInit(): void {}(): void {}
您需要创建相应的数据透视表报表以使用数据填充数据透视表。报告是一个对象，其中包含有关数据源的信息，并描述了网格上可见的字段以及已应用的过滤，排序，格式设置等。
这是如何为数据透视表定义简单报告的示例：
public pivotReport = { pivotReport = {
dataSource: {: {
filename: “./assets/data/covid_19_clean_complete.csv”: “./assets/data/covid_19_clean_complete.csv”
},},
slice: {: {
rows: [{: [{
uniqueName: “Date”,: “Date”,
filter: {: {
query: {: {
last: “month”,last: “month”,
},},
},},
}, ],}, ],
columns: [{: [{
uniqueName: “Country/Region”,: “Country/Region”,
filter: {: {
members: [“country/region.[us]”],: [“country/region.[us]”],
},},
},},
{{
uniqueName: “[Measures]”,: “[Measures]”,
},},
],],
measures: [{: [{
uniqueName: “Active”,: “Active”,
aggregation: “sum”,: “sum”,
},},
{{
uniqueName: “Recovered”,: “Recovered”,
aggregation: “sum”,: “sum”,
}}
],],
},},
};};
注意我们如何将数据透视表连接到数据–通过将文件的路径指定为dataSource对象中filename属性的值。
您可以根据想要获得的见解来尝试测量，汇总和字段。
创建图表
由于图表依赖于数据透视表中的汇总数据，因此在创建图表之前，表本身应完成数据处理并进行渲染。
为了跟踪这一时刻，我们将为数据透视reportcomplete事件创建处理程序，并在稍后在中创建组件模板时附加它们：dashboard.component.html
onFirstReportComplete(): void {(): void {
this.pivot.flexmonster.off(“reportcomplete”);this.pivot.flexmonster.off(“reportcomplete”);
this.createLineChart();this.createLineChart();
this.createBubbleChart();this.createBubbleChart();
}}
onSecondReportComplete(): void {(): void {
this.pivot2.flexmonster.off(“reportcomplete”);this.pivot2.flexmonster.off(“reportcomplete”);
this.createMap();this.createMap();
}}
报表完成加载后，我们将绘制图表以可视化数据透视表中的数据。
例如，以下是您如何定义一个负责绘制折线图的函数的方法：
createLineChart(): void {(): void {
this.pivot.flexmonster.highcharts.getData({this.pivot.flexmonster.highcharts.getData({
type: “line”,: “line”,
},},
function(chartConfig) {function(chartConfig) {
Highcharts.chart(Highcharts.chart(
“linechart-container”, < Highcharts.Options > chartConfig"linechart-container", < Highcharts.Options > chartConfig
);
},},
function(chartConfig) {function(chartConfig) {
Highcharts.chart(Highcharts.chart(
“linechart-container”, < Highcharts.Options > chartConfig"linechart-container", < Highcharts.Options > chartConfig
);
}}
);
}}
我们正在使用API调用从表中获取数据，并将其以现成的格式传递给图表。此方法是Highcharts连接器的一部分。它接受的主要参数是准备数据的图表的类型，要可视化的数据片（可选），回调以及在创建和更新数据透视表时运行的更新处理程序。以同样的方式，你可以创建不同的绘制图表的多种功能，如，，，等。flexmonster.highcharts.getData()
createLineChart()createBubbleChart()createMap()
创建组件的模板
在这里，您将嵌入数据透视表和图表的容器。您可以根据需要定义任意数量的组件。确保它们都有唯一的标识符。
(reportcomplete)=“onFirstReportComplete()”–此行代码表示如果reportcomplete触发此事件，onFirstReportComplete则调用该函数。
注意处理程序的reportcomplete附加方式。事件必须用括号括起来，而所有输入属性都必须用方括号括起来。在其API参考中详细了解数据透视表的输入属性和事件。
打开，然后在此处导入仪表板组件：app.module.ts
import { DashboardComponent } from ‘./dashboard/dashboard.component’; { DashboardComponent } from ‘./dashboard/dashboard.component’;
添加DashboardComponent到声明数组以通知Angular哪些组件属于此模块。
@NgModule({({
….….
declarations: [AppComponent, DashboardComponent],: [AppComponent, DashboardComponent],
….….
})})
配置路由
为了能够从主页导航到仪表板，请建立一个路由模块。在创建文件中：src/appapp-routing.module.ts
import { {
NgModuleNgModule
} from “@angular/core”;} from “@angular/core”;
import {import {
RouterModule,RouterModule,
RoutesRoutes
} from “@angular/router”;} from “@angular/router”;
import {import {
DashboardComponentDashboardComponent
} from “./dashboard/dashboard.component”;} from “./dashboard/dashboard.component”;
const appRoutes: Routes = [{const appRoutes: Routes = [{
path: “dashboard”,: “dashboard”,
component: DashboardComponent: DashboardComponent
},},
{{
path: ‘’,: '’,
redirectTo: ‘dashboard’: ‘dashboard’
}}
];];
@NgModule({@NgModule({
imports: [RouterModule.forRoot(appRoutes)],: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule],: [RouterModule],
})})
export class AppRoutingModule {}export class AppRoutingModule {}
在中，添加指令：app.component.htmlRouterOutlet
在中，导入路由模块：app.module.ts
import { AppRoutingModule } from “./app-routing.module”; { AppRoutingModule } from “./app-routing.module”;
将模块添加到imports数组：
@NgModule({({
…
imports: [BrowserModule, FlexmonsterPivotModule, AppRoutingModule],: [BrowserModule, FlexmonsterPivotModule, AppRoutingModule],
…
})})
造型仪表板
仪表板的布局完成后，让我们注意颜色和字体。例如，您可以为图表使用Roboto字体和以下颜色：“＃00A45A”，“＃DF3800”，“＃FFB800”，“＃6D3BD8”，“＃0075FF”。您可以了解有关如何将自定义主题应用于图表的更多信息。
结果
让我们再次运行该应用程序，看看我们新的网络分析解决方案：
ng serve
打开http：// localhost：4200 /或http：// localhost：4200 /仪表板：
结论
您得到了什么呢？
现在，您已经拥有一个带有报告仪表板的简单Angular应用程序。Flexmonster Pivot充当我们的仪表板的引擎，从而处理所有数据处理并将现成的数据传递到图表。高图通过交互式图形突出显示了数据的重要方面。
您已准备好开始向最终用户交付该应用程序。应用程序的主要好处是每个人都可以与之交互，保存报告并获得独特的见解。这就是该仪表板与静态报告解决方案的区别所在。
代码和现场演示demo
出于演示目的，该代码以其简化版本提供。仅给出主要亮点。查看Angular仪表板的完整代码。