开源图表库Highcharts教程：如何创建具有交互式报表功能的Angular应用程序

在本入门教程中，您将学习如何创建具有交互式报表功能的Angular应用程序。

Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts最新试用版

在本入门教程中，您将学习如何创建具有交互式报表功能的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-appng 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()

创建组件的模板

<fm-pivot #pivot [toolbar]="true" [width]="'100%'" [height]="500" [report]="pivotReport" (reportcomplete)="onFirstReportComplete()"> #pivot [toolbar]="true" [width]="'100%'" [height]="500" [report]="pivotReport" (reportcomplete)="onFirstReportComplete()"></fm-pivot></fm-pivot><fm-pivot #pivot2 [toolbar]="false" [width]="'100%'" [height]="500" [report]="reportUSA" (reportcomplete)="onSecondReportComplete()"><fm-pivot #pivot2 [toolbar]="false" [width]="'100%'" [height]="500" [report]="reportUSA" (reportcomplete)="onSecondReportComplete()"></fm-pivot></fm-pivot><div id="linechart-container"></div><div id="linechart-container"></div><div id="bubblechart-container"></div><div id="bubblechart-container"></div><div id="map-container"></div><div id="map-container"></div>

打开并定义如何定位可视化组件。将指令用于表格，将div容器用于图表。dashboard.component.htmlfm-pivot

在这里，您将嵌入数据透视表和图表的容器。您可以根据需要定义任意数量的组件。确保它们都有唯一的标识符。

(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

<router-outlet> </ router-outlet>

在中，导入路由模块：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 /仪表板：