Angular Highcharts 快速指南

Angular Highcharts - 概述

HighChart Angular 封裝器是一個基於 Angular 的開源元件，它在 Angular 應用中提供優雅且功能豐富的 Highcharts 視覺化效果，並可以與 Angular 元件無縫整合。本教程包含討論 Highcharts 所有基本元件以及在 Angular 應用中相應示例的章節。

特性

相容性 - 支援所有現代瀏覽器，以及 iPhone/iPad 瀏覽器和 Internet Explorer 6 及更高版本。現代瀏覽器使用 SVG 進行圖形渲染，而在舊版 Internet Explorer 中，圖形使用 VML 繪製。
純 TypeScript - 無需 JavaScript，因為完整的 Highcharts API 可在 TypeScript 中使用。
無需 Flash - 無需 Flash Player 或 Java 等客戶端外掛，因為 Highcharts 使用原生瀏覽器技術，圖表可以在現代移動裝置上無需修改即可執行。
簡潔的語法 - 大多數方法都是可鏈式的，因此可以使用與 JSON 一樣緊湊的語法來管理圖表的配置選項。
動態性 - 建立圖表後，可以隨時動態新增序列和點。支援事件鉤子。支援伺服器互動。
文件齊全 - Highcharts API 文件詳盡，包含大量程式碼和語法示例。

Angular Highcharts - 環境設定

本教程將指導您如何準備開發環境，以開始使用 Highcharts 和 Angular 框架進行工作。在本節中，我們將討論 Angular 6 所需的環境設定。要安裝 Angular 6，我們需要以下內容：

Nodejs
Npm
Angular CLI
用於編寫程式碼的 IDE

Nodejs 版本必須高於 8.11，npm 版本必須高於 5.6。

Nodejs

要檢查系統中是否安裝了 nodejs，請在終端中鍵入node -v。這將幫助您檢視當前系統上安裝的 nodejs 版本。

C:\>node -v
v8.11.3

如果沒有任何輸出，請在您的系統上安裝 nodejs。要安裝 nodejs，請訪問 nodejs 的主頁https://nodejs.com.tw/en/download/ 並根據您的作業系統安裝軟體包。

nodejs 的主頁如下所示：

根據您的作業系統安裝所需的軟體包。安裝 nodejs 後，npm 也會隨之安裝。要檢查 npm 是否已安裝，請在終端中鍵入 npm -v。它應該顯示 npm 的版本。

C:\>npm -v
5.6.0

藉助 Angular CLI，Angular 6 的安裝非常簡單。訪問 Angular 的主頁https://cli.angular.io/ 以獲取命令的參考。

鍵入npm install -g @angular/cli，以在您的系統上安裝 Angular CLI。

安裝 Angular CLI 後，您將在終端中看到上述安裝資訊。您可以使用任何您選擇的 IDE，例如 WebStorm、Atom、Visual Studio Code 等。

安裝 Highcharts

執行以下命令以在建立的專案中安裝 highchart 模組。

highchartsApp>npm install highcharts --save
+ highcharts@6.2.0
added 1 package in 137.534s

執行以下命令以在建立的專案中安裝 highchart 封裝器模組。

highchartsApp>npm install highcharts-angular --save
+ highcharts-angular@2.3.1
added 1 package in 20.93s

在 highchartsApp.module.ts 檔案中新增以下條目

import { HighchartsChartComponent } from 'highcharts-angular';
declarations: [
   ...
   HighchartsChartComponent    
],

Angular Highcharts - 配置語法

在本節中，我們將展示使用 Angular 中的 Highcharts API 繪製圖表所需的配置。

步驟 1 - 建立 Angular 應用

按照以下步驟更新我們在Angular 6 - 專案設定章節中建立的 Angular 應用：

步驟	描述
1	建立一個名為highchartsApp的專案，如Angular 6 - 專案設定章節中所述。
2	修改app.module.ts、app.component.ts和app.component.html，如下所述。保持其餘檔案不變。
3	編譯並執行應用程式以驗證已實現邏輯的結果。

以下是修改後的模組描述符app.module.ts的內容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HighchartsChartComponent } from 'highcharts-angular';
@NgModule({
   declarations: [
      AppComponent,
      HighchartsChartComponent    
   ],
   imports: [
      BrowserModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改後的 HTML 宿主檔案app.component.html的內容。

<highcharts-chart
   [Highcharts] = "highcharts" 
   [options] = "chartOptions" 
   style = "width: 100%; height: 400px; display: block;">
</highcharts-chart>

在瞭解配置後，我們將在最後看到更新後的 app.component.ts。

步驟 2 - 使用配置

建立 Highcharts 並建立 chartOptions

highcharts = Highcharts;
   chartOptions = {   
}

建立圖表

使用 chartOptions 配置圖表的型別、標題和副標題。

chart: {
   type: "spline"
},

xAxis

使用 chartOptions 配置要在 X 軸上顯示的刻度。

xAxis:{
   categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},

yAxis

使用 chartOptions 配置要在 Y 軸上顯示的標題。

yAxis: {          
   title:{
      text:"Temperature °C"
   } 
},

tooltip

配置工具提示。使用 chartOptions 設定要在值（y 軸）後新增的字尾。

tooltip: {
   valueSuffix:" °C"
},

series

使用 chartOptions 配置要在圖表上顯示的資料。series 是一個數組，此陣列的每個元素代表圖表上的一條線。

series: [
   {
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
   },
   {
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
   },
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   },
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
]

示例

請考慮以下示例以進一步瞭解配置語法：

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {   
      chart: {
         type: "spline"
      },
      title: {
         text: "Monthly Average Temperature"
      },
      subtitle: {
         text: "Source: WorldClimate.com"
      },
      xAxis:{
         categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      },
      yAxis: {          
         title:{
            text:"Temperature °C"
         } 
      },
      tooltip: {
         valueSuffix:" °C"
      },
      series: [
         {
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
         },
         {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
         },
         {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
         },
         {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
         }
      ]
   };
}

結果

驗證結果。

Angular Highcharts - 線形圖

線形圖用於繪製基於線/樣條線的圖表。在本節中，我們將討論不同型別的線形圖和樣條線圖。

序號	圖表型別和描述
1	基本線形圖基本線形圖。
2	帶資料標籤帶資料標籤的圖表。
3	時間序列，可縮放帶時間序列的圖表。
4	帶反轉軸的樣條線圖具有反轉軸的樣條線圖。
5	帶符號的樣條線圖使用符號表示熱量/降雨的樣條線圖。
6	帶繪圖帶的樣條線圖帶繪圖帶的樣條線圖。

Angular Highcharts - 面積圖

面積圖用於繪製基於區域的圖表。在本節中，我們將討論不同型別的基於區域的圖表。

序號	圖表型別和描述
1	基本面積圖基本面積圖。
2	帶負值的面積圖具有負值的面積圖。
3	堆疊面積圖具有相互堆疊的區域的圖表。
4	百分比面積圖以百分比形式顯示資料的圖表。
5	帶缺失點的面積圖資料中帶有缺失點的圖表。
6	反轉軸使用反轉軸的面積圖。
7	面積樣條線圖使用樣條線的面積圖。

Angular Highcharts - 條形圖

條形圖用於繪製基於條形的圖表。在本節中，我們將討論不同型別的基於條形的圖表。

序號	圖表型別和描述
1	基本條形圖基本條形圖。
2	堆疊條形圖條形圖相互堆疊。
3	帶負值的條形圖帶負值的條形圖。

Angular Highcharts - 柱狀圖

柱狀圖用於繪製基於柱狀的圖表。在本節中，我們將討論不同型別的基於柱狀的圖表。

序號	圖表型別和描述
1	基本柱狀圖基本柱狀圖。
2	帶負值的柱狀圖具有負值的柱狀圖。
3	堆疊柱狀圖柱狀圖相互堆疊。
4	堆疊和分組柱狀圖柱狀圖以堆疊和分組的形式顯示。
5	帶堆疊百分比的柱狀圖帶堆疊百分比的圖表。
6	帶旋轉標籤的柱狀圖柱狀圖中帶有旋轉標籤。
7	柱狀範圍圖使用範圍的柱狀圖。

Angular Highcharts - 餅圖

GWP Highcharts - 餅圖

餅圖用於繪製基於餅的圖表。在本節中，我們將討論不同型別的基於餅的圖表。

序號	圖表型別和描述
1	基本餅圖基本餅圖。
2	帶圖例的餅圖帶圖例的餅圖。
3	環形圖環形圖。

Angular Highcharts - 散點圖

以下是一個基本散點圖的示例。

我們已經在Highcharts 配置語法章節中看到了用於繪製圖表的配置。

下面給出了一個基本散點圖的示例。

配置

現在讓我們看看採取的額外配置/步驟。

series

將圖表型別配置為基於散點的。series.type決定圖表的序列型別。此處，預設值為“line”。

var chart = {
   type: 'scatter',
   zoomType: 'xy'
};

示例

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {         
      title : {
         text: 'Scatter plot'   
      },      
      series : [{
         type: 'scatter',
         zoomType:'xy',
         name: 'Browser share',
         data: [ 1, 1.5, 2.8, 3.5, 3.9, 4.2 ]
      }]
   };
}

結果

驗證結果。

Angular Highcharts - 動態圖表

動態圖表用於繪製基於資料的圖表，其中資料可以在圖表渲染後更改。在本節中，我們將討論不同型別的動態圖表。

序號	圖表型別和描述
1	每秒更新一次的樣條線圖每秒更新一次的樣條線圖。
2	單擊新增點具有點新增功能的圖表。

Angular Highcharts - 組合圖表

組合圖表用於繪製混合圖表；例如，條形圖和餅圖。在本節中，我們將討論不同型別的組合圖表。

序號	圖表型別和描述
1	柱狀圖、線形圖和餅圖包含柱狀圖、線形圖和餅圖的圖表。
2	雙軸、線形圖和柱狀圖帶雙軸、線形圖和柱狀圖的圖表。
3	多個軸具有多個軸的圖表。
4	帶回歸線的散點圖帶回歸線的散點圖。

Angular Highcharts - 3D 圖表

3D 圖表用於繪製三維圖表。在本節中，我們將討論不同型別的 3D 圖表。

序號	圖表型別和描述
1	3D 柱狀圖 3D 柱狀圖。
2	3D 散點圖 3D 散點圖。
3	3D 餅圖 3D 餅圖。

Angular Highcharts - 地圖圖表

地圖圖表用於繪製熱力圖或樹狀圖。在本節中，我們將討論不同型別的地圖圖表。

序號	圖表型別和描述
1	熱力圖熱力圖。
2	樹狀圖樹狀圖。

列印頁面

序號	圖表型別和描述
1	基本線形圖基本線形圖。
2	帶資料標籤帶資料標籤的圖表。
3	時間序列，可縮放帶時間序列的圖表。
4	帶反轉軸的樣條線圖具有反轉軸的樣條線圖。
5	帶符號的樣條線圖使用符號表示熱量/降雨的樣條線圖。
6	帶繪圖帶的樣條線圖帶繪圖帶的樣條線圖。

序號	圖表型別和描述
1	基本面積圖基本面積圖。
2	帶負值的面積圖具有負值的面積圖。
3	堆疊面積圖具有相互堆疊的區域的圖表。
4	百分比面積圖以百分比形式顯示資料的圖表。
5	帶缺失點的面積圖資料中帶有缺失點的圖表。
6	反轉軸使用反轉軸的面積圖。
7	面積樣條線圖使用樣條線的面積圖。

序號	圖表型別和描述
1	基本條形圖基本條形圖。
2	堆疊條形圖條形圖相互堆疊。
3	帶負值的條形圖帶負值的條形圖。

序號	圖表型別和描述
1	基本柱狀圖基本柱狀圖。
2	帶負值的柱狀圖具有負值的柱狀圖。
3	堆疊柱狀圖柱狀圖相互堆疊。
4	堆疊和分組柱狀圖柱狀圖以堆疊和分組的形式顯示。
5	帶堆疊百分比的柱狀圖帶堆疊百分比的圖表。
6	帶旋轉標籤的柱狀圖柱狀圖中帶有旋轉標籤。
7	柱狀範圍圖使用範圍的柱狀圖。

序號	圖表型別和描述
1	基本餅圖基本餅圖。
2	帶圖例的餅圖帶圖例的餅圖。
3	環形圖環形圖。