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-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()
創建組件的模板
<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 /儀表板：
結論
您得到了什么呢？
現在，您已經擁有一個帶有報告儀表板的簡單Angular應用程序。Flexmonster Pivot充當我們的儀表板的引擎，從而處理所有數據處理并將現成的數據傳遞到圖表。高圖通過交互式圖形突出顯示了數據的重要方面。
您已準備好開始向最終用戶交付該應用程序。應用程序的主要好處是每個人都可以與之交互，保存報告并獲得獨特的見解。這就是該儀表板與靜態報告解決方案的區別所在。
代碼和現場演示demo
出于演示目的，該代碼以其簡化版本提供。僅給出主要亮點。查看Angular儀表板的完整代碼。
想要購買Highcharts正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：
金喜正規買球 
18次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線