Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

在本入門教程中，您將學習如何創建具有交互式報表功能的Angular應用程序。作為數據可視化工具，您將使用Highcharts（一個多平臺圖表庫）和Flexmonster Pivot（一個JavaScript組件），該組件將獲取原始數據，進行處理并將其顯示在數據透視表網格上。表格和圖表可視化相結合，構成了一個高級分析儀表板。

本教程是您掌握數據可視化和Angular開發技能的絕好機會。

以下是一些可以完成本教程的實際原因：

• 您將學習如何構建依賴于高級數據可視化組件的動態報告應用程序。
• 最終的項目將允許其最終用戶實時挖掘數據并執行自助服務分析。

要成功完成本教程，請在計算機上安裝以下工具：

• Node.js的本地開發環境。
• Angular CLI。

您將不使用理論數據，而是使用經驗數據。即，您將設置一個報告儀表板，以通過交互式可視化工具探索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）。它可以用于按州跟蹤案件的總數。

儲存資料

讓我們決定儀表板應如何訪問數據。
讓我們在src / assets目錄中創建一個數據文件夾，我們將在其中存儲CSV數據文件。

通過數據可視化思路進行思考

主要目標是關注美國的每日/每周/每月COVID動態。為此，儀表板將包含多個數據可視化組件：

• 兩個數據透視表匯總了來自不同數據源的數據。
• 顯示每個州已確診病例數的總譜圖。
• 一個氣泡圖，用于報告不同國家中正在發生和已恢復的病例數。
• 用于報告美國案件每兩周/每周/每月動態的折線圖。

首先，使用Angular CLI創建一個新的Angular項目：

ng new report-app

cd reporting-app
ng serve --open

安裝Highcharts模塊

將Highcharts軟件包安裝到您的應用中：

npm install highcharts --save

使用單個npm命令安裝Flexmonster Angular模塊：

npm install ng-flexmonster

import { FlexmonsterPivotModule } from 'ng-flexmonster';
@NgModule({
  ...
  imports: [FlexmonsterPivotModule],
  ...
})

"scripts": [: [
  "node_modules/flexmonster/lib/flexmonster.highcharts.js""node_modules/flexmonster/lib/flexmonster.highcharts.js"
]]

@import“ flexmonster / flexmonster.min.css” “ flexmonster / flexmonster.min.css”

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：包含組件的樣式。

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';

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);

為該類定義一個組件裝飾器，并為其提供配置元數據：

@Component({({
  selector: 'app-dashboard',: 'app-dashboard',
  templateUrl: './dashboard.component.html',: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']: ['./dashboard.component.css']
})})

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",
      }}
    ],],
  },},
};};

您可以根據想要獲得的見解來嘗試測量，匯總和字段。

創建圖表

由于圖表依賴于數據透視表中的匯總數據，因此在創建圖表之前，表本身應完成數據處理并進行渲染。

為了跟蹤這一時刻，我們將為數據透視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
      ););
    }}
  ););
}}

創建組件的模板

<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';

@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>

import { AppRoutingModule } from "./app-routing.module"; { AppRoutingModule } from "./app-routing.module";

@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儀表板的完整代碼。