Highcharts是一款純JavaScript編寫(xiě)的圖表庫(kù)，為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點(diǎn)圖、角度測(cè)量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類型。

點(diǎn)擊下載Highcharts最新試用版

在本入門(mén)教程中，您將學(xué)習(xí)如何創(chuàng)建具有交互式報(bào)表功能的Angular應(yīng)用程序。作為數(shù)據(jù)可視化工具，您將使用Highcharts（一個(gè)多平臺(tái)圖表庫(kù)）和Flexmonster Pivot（一個(gè)JavaScript組件），該組件將獲取原始數(shù)據(jù)，進(jìn)行處理并將其顯示在數(shù)據(jù)透視表網(wǎng)格上。表格和圖表可視化相結(jié)合，構(gòu)成了一個(gè)高級(jí)分析儀表板。

本教程是您掌握數(shù)據(jù)可視化和Angular開(kāi)發(fā)技能的絕好機(jī)會(huì)。

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

• 您將學(xué)習(xí)如何構(gòu)建依賴于高級(jí)數(shù)據(jù)可視化組件的動(dòng)態(tài)報(bào)告應(yīng)用程序。
• 最終的項(xiàng)目將允許其最終用戶實(shí)時(shí)挖掘數(shù)據(jù)并執(zhí)行自助服務(wù)分析。

要成功完成本教程，請(qǐng)?jiān)谟?jì)算機(jī)上安裝以下工具：

• Node.js的本地開(kāi)發(fā)環(huán)境。
• Angular CLI。

您將不使用理論數(shù)據(jù)，而是使用經(jīng)驗(yàn)數(shù)據(jù)。即，您將設(shè)置一個(gè)報(bào)告儀表板，以通過(guò)交互式可視化工具探索COVID大流行趨勢(shì)。

您可以互換使用任何其他數(shù)據(jù)集。但是請(qǐng)注意，在這種情況下，您應(yīng)該根據(jù)數(shù)據(jù)集的字段名稱來(lái)調(diào)整報(bào)表的結(jié)構(gòu)。

這是到目前為止我們選擇的數(shù)據(jù)集列表：

• 約翰霍普金斯大學(xué)（covid_19_clean_complete.csv）提供的數(shù)據(jù)，其中包括截至2020年1月22日來(lái)自不同國(guó)家的COVID-19 確診，死亡和康復(fù)病例的累計(jì)計(jì)數(shù)。它可用于探索美國(guó)或其他國(guó)家/地區(qū)案件的時(shí)間動(dòng)態(tài)。
• 由約翰·霍普金斯大學(xué)提供的美國(guó)確診病例數(shù)據(jù)（johns_hopkins_csse / 2019-novel-coronavirus-covid-19-2019-ncov-data-repository-confirmed-cases-in-the-us.csv）。它可以用于按州跟蹤案件的總數(shù)。

儲(chǔ)存資料

讓我們決定儀表板應(yīng)如何訪問(wèn)數(shù)據(jù)。
讓我們?cè)趕rc / assets目錄中創(chuàng)建一個(gè)數(shù)據(jù)文件夾，我們將在其中存儲(chǔ)CSV數(shù)據(jù)文件。

通過(guò)數(shù)據(jù)可視化思路進(jìn)行思考

主要目標(biāo)是關(guān)注美國(guó)的每日/每周/每月COVID動(dòng)態(tài)。為此，儀表板將包含多個(gè)數(shù)據(jù)可視化組件：

• 兩個(gè)數(shù)據(jù)透視表匯總了來(lái)自不同數(shù)據(jù)源的數(shù)據(jù)。
• 顯示每個(gè)州已確診病例數(shù)的總譜圖。
• 一個(gè)氣泡圖，用于報(bào)告不同國(guó)家中正在發(fā)生和已恢復(fù)的病例數(shù)。
• 用于報(bào)告美國(guó)案件每?jī)芍?每周/每月動(dòng)態(tài)的折線圖。

首先，使用Angular CLI創(chuàng)建一個(gè)新的Angular項(xiàng)目：

ng new report-app

cd reporting-app
ng serve --open

安裝Highcharts模塊

將Highcharts軟件包安裝到您的應(yīng)用中：

npm install highcharts --save

使用單個(gè)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的基本構(gòu)建塊，因此讓我們遵循面向組件的方法，并為將來(lái)的儀表板創(chuàng)建一個(gè)單獨(dú)的組件。為此，請(qǐng)?jiān)谀夸泝?nèi)創(chuàng)建一個(gè)儀表板文件夾。接下來(lái)，在此文件夾中創(chuàng)建三個(gè)文件：src/app

• Dashboard.component.ts：實(shí)現(xiàn)配置數(shù)據(jù)透視表和圖表以及它們之間的交互的所有邏輯。
• Dashboard.component.html：描述儀表板的組件如何在頁(yè)面上呈現(xiàn)。
• 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);

為該類定義一個(gè)組件裝飾器，并為其提供配置元數(shù)據(jù)：

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

這是如何為數(shù)據(jù)透視表定義簡(jiǎn)單報(bào)告的示例：

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

您可以根據(jù)想要獲得的見(jiàn)解來(lái)嘗試測(cè)量，匯總和字段。

創(chuàng)建圖表

由于圖表依賴于數(shù)據(jù)透視表中的匯總數(shù)據(jù)，因此在創(chuàng)建圖表之前，表本身應(yīng)完成數(shù)據(jù)處理并進(jìn)行渲染。

為了跟蹤這一時(shí)刻，我們將為數(shù)據(jù)透視r(shí)eportcomplete事件創(chuàng)建處理程序，并在稍后在中創(chuàng)建組件模板時(shí)附加它們：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();
  }}

例如，以下是您如何定義一個(gè)負(fù)責(zé)繪制折線圖的函數(shù)的方法：

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

創(chuàng)建組件的模板

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

打開(kāi)并定義如何定位可視化組件。將指令用于表格，將div容器用于圖表。dashboard.component.htmlfm-pivot

(reportcomplete)="onFirstReportComplete()"–此行代碼表示如果reportcomplete觸發(fā)此事件，onFirstReportComplete則調(diào)用該函數(shù)。

注意處理程序的reportcomplete附加方式。事件必須用括號(hào)括起來(lái)，而所有輸入屬性都必須用方括號(hào)括起來(lái)。在其API參考中詳細(xì)了解數(shù)據(jù)透視表的輸入屬性和事件。
打開(kāi)，然后在此處導(dǎo)入儀表板組件：app.module.ts

import { DashboardComponent } from './dashboard/dashboard.component'; { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({({
  ….….
  declarations: [AppComponent, DashboardComponent],: [AppComponent, DashboardComponent],
  ….….
})})

為了能夠從主頁(yè)導(dǎo)航到儀表板，請(qǐng)建立一個(gè)路由模塊。在創(chuàng)建文件中：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”。您可以了解有關(guān)如何將自定義主題應(yīng)用于圖表的更多信息。

結(jié)果

讓我們?cè)俅芜\(yùn)行該應(yīng)用程序，看看我們新的網(wǎng)絡(luò)分析解決方案：
ng serve
打開(kāi)http：// localhost：4200 /或http：// localhost：4200 /儀表板：

現(xiàn)在，您已經(jīng)擁有一個(gè)帶有報(bào)告儀表板的簡(jiǎn)單Angular應(yīng)用程序。Flexmonster Pivot充當(dāng)我們的儀表板的引擎，從而處理所有數(shù)據(jù)處理并將現(xiàn)成的數(shù)據(jù)傳遞到圖表。高圖通過(guò)交互式圖形突出顯示了數(shù)據(jù)的重要方面。
您已準(zhǔn)備好開(kāi)始向最終用戶交付該應(yīng)用程序。應(yīng)用程序的主要好處是每個(gè)人都可以與之交互，保存報(bào)告并獲得獨(dú)特的見(jiàn)解。這就是該儀表板與靜態(tài)報(bào)告解決方案的區(qū)別所在。

代碼和現(xiàn)場(chǎng)演示demo

出于演示目的，該代碼以其簡(jiǎn)化版本提供。僅給出主要亮點(diǎn)。查看Angular儀表板的完整代碼。