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

點擊下載Highcharts最新試用版

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

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

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

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

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

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

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

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

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

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

儲存資料

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

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

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

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

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

ng new report-app

cd reporting-app
ng serve --open

安裝Highcharts模塊

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

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的基本構(gòu)建塊，因此讓我們遵循面向組件的方法，并為將來的儀表板創(chuàng)建一個單獨的組件。為此，請在目錄內(nèi)創(chuàng)建一個儀表板文件夾。接下來，在此文件夾中創(chuàng)建三個文件：src/app

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

為該類定義一個組件裝飾器，并為其提供配置元數(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ù)透視表定義簡單報告的示例：

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ù)想要獲得的見解來嘗試測量，匯總和字段。

創(chuàng)建圖表

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

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

例如，以下是您如何定義一個負(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>

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

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

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

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

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

為了能夠從主頁導(dǎo)航到儀表板，請建立一個路由模塊。在創(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é)果

讓我們再次運行該應(yīng)用程序，看看我們新的網(wǎng)絡(luò)分析解決方案：
ng serve
打開http：// localhost：4200 /或http：// localhost：4200 /儀表板：

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

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

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