Angular Google Charts 快速指南

Angular Google Charts - 概述

Google Charts 是一個基於純 JavaScript 的圖表庫，旨在透過新增互動式圖表功能來增強 Web 應用程式。它支援各種圖表。圖表使用 SVG 在 Chrome、Firefox、Safari、Internet Explorer (IE) 等標準瀏覽器中繪製。在舊版 IE 6 中，使用 VML 繪製圖形。

angular-google-charts 是一個基於 Angular 的開源 Google Charts 包裝器，它在 Angular 應用程式中提供了優雅且功能豐富的 Google Charts 視覺化效果，並且可以與 Angular 元件無縫整合。各章節將討論 Google Charts 的所有基本元件，並在 Angular 應用程式中提供相應的示例。

特性

以下是 Google Charts 庫的主要特性。

相容性 - 在所有主要瀏覽器和移動平臺（如 Android 和 iOS）上都能無縫執行。
多點觸控支援 - 支援基於觸控式螢幕的平臺（如 Android 和 iOS）上的多點觸控。非常適合 iPhone/iPad 和基於 Android 的智慧手機/平板電腦。
免費使用 - 開源且可免費用於非商業用途。
輕量級 - loader.js 核心庫是一個極其輕量級的庫。
簡單的配置 - 使用 JSON 定義各種圖表配置，非常易於學習和使用。
動態的 - 允許即使在圖表生成後也能修改圖表。
多軸 - 不限於 x、y 軸。支援圖表上的多個軸。
可配置的工具提示 - 當用戶將滑鼠懸停在圖表上的任何點時，會出現工具提示。googlecharts 提供內建格式化程式或回撥格式化程式來以程式設計方式控制工具提示。
日期時間支援 - 特殊處理日期時間。提供許多內建控制元件來控制基於日期的類別。
列印 - 使用網頁列印圖表。
外部資料 - 支援從伺服器動態載入資料。使用回撥函式控制資料。
文字旋轉 - 支援沿任何方向旋轉標籤。

支援的圖表型別

Google Charts 庫提供以下型別的圖表

序號	圖表型別/描述
1	折線圖用於繪製基於線/樣條線的圖表。
2	面積圖用於繪製基於區域的圖表。
3	餅圖用於繪製餅圖。
4	桑基圖、散點圖、階梯面積圖、表格、時間線、樹狀圖、趨勢線用於繪製散點圖。
5	氣泡圖用於繪製基於氣泡的圖表。
6	動態圖表用於繪製使用者可以修改的動態圖表。
7	組合圖用於繪製各種圖表的組合。
8	3D 圖表用於繪製 3D 圖表。
9	Angular 儀表用於繪製速度計型別的圖表。
10	熱力圖用於繪製熱力圖。
11	樹狀圖用於繪製樹狀圖。

在接下來的章節中，我們將詳細討論上述每種型別的圖表，並提供示例。

許可證

Google Charts 是開源的，可以免費使用。請訪問以下連結 - 服務條款。

Angular Google Charts - 環境設定

本教程將指導您如何準備開發環境以開始使用 Google Charts 和 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.org/en/download/ 並根據您的作業系統安裝軟體包。

根據您的作業系統安裝所需的軟體包。安裝 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 等。

安裝 Google Charts 包裝器

執行以下命令以在建立的專案中安裝 Google Charts 包裝器模組。

googleChartsApp> npm angular-google-charts

+ angular-google-charts@0.1.0
added 2 packages in 20.526s

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

import { GoogleChartsModule } from 'angular-google-charts';

imports: [
   ...
   GoogleChartsModule
],

Angular Google Charts - 配置語法

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

步驟 1 - 建立 Angular 應用程式

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

步驟	描述
1	建立一個名為googleChartsApp 的專案，如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 { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
   declarations: [
      AppComponent   
   ],
   imports: [
      BrowserModule,GoogleChartsModule
   ],
   providers: [], bootstrap: [AppComponent]
})
export class AppModule { }

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

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="data"
   [columnNames]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

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

步驟 2 - 使用配置

設定標題

title = 'Browser market shares at a specific website, 2014';

設定圖表型別

type='PieChart';

資料

配置要在圖表上顯示的資料。

data = [
   ['Firefox', 45.0],
   ['IE', 26.8],
   ['Chrome', 12.8],
   ['Safari', 8.5],
   ['Opera', 6.2],
   ['Others', 0.7] 
];

列名

配置要顯示的列名。

columnNames = ['Browser', 'Percentage'];

選項

配置其他選項。

options = {
   colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], is3D: true
};

示例

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

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Browser market shares at a specific website, 2014';
   type = 'PieChart';
   data = [
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
      ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7] 
   ];
   columnNames = ['Browser', 'Percentage'];
   options = {    
   };
   width = 550;
   height = 400;
}

結果

驗證結果。

Angular Google Charts - 面積圖

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

序號	圖表型別/描述
1	基本面積圖基本面積圖
2	包含負值的面積圖具有負值的面積圖。
3	堆疊面積圖圖表具有相互堆疊的區域。
4	包含缺失點的面積圖資料中包含缺失點的圖表。

Angular Google Charts - 條形圖

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

序號	圖表型別/描述
1	基本條形圖基本條形圖
2	分組條形圖分組條形圖。
3	堆疊條形圖圖表具有相互堆疊的條形。
4	負條形圖具有負堆疊的條形圖。

Angular Google Charts - 氣泡圖

氣泡圖用於繪製基於氣泡的圖表。在本節中，我們將討論以下型別的基於氣泡的圖表。

序號	圖表型別/描述
1	基本氣泡圖基本氣泡圖。
2	帶資料標籤的氣泡圖帶資料標籤的氣泡圖。

Angular Google Charts - 蠟燭圖

蠟燭圖用於顯示某個值變化範圍內的開盤價和收盤價，通常用於表示股票。在本節中，我們將討論以下型別的基於蠟燭圖的圖表。

序號	圖表型別/描述
1	基本蠟燭圖基本蠟燭圖。
2	帶自定義顏色的蠟燭圖自定義蠟燭圖。

Angular Google Charts - 柱狀圖

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

序號	圖表型別/描述
1	基本柱狀圖基本柱狀圖
2	分組柱狀圖分組柱狀圖。
3	堆疊柱狀圖圖表具有相互堆疊的柱狀。
4	負堆疊柱狀圖具有負堆疊的柱狀圖。

Angular Google Charts - 組合圖

組合圖有助於將每個系列呈現為以下列表中的不同標記型別：折線、區域、條形、蠟燭圖和階梯區域。要為系列分配預設標記型別，請使用 seriesType 屬性。series 屬性用於單獨指定每個系列的屬性。以下是用柱狀圖顯示差異的示例。

我們已經在Google Charts 配置語法章節中看到了用於繪製圖表的配置。現在，讓我們來看一個用柱狀圖顯示差異的示例。

配置

我們使用了ComboChart類來顯示組合圖。

type='ComboChart';

示例

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Fruits distribution';
   type = 'ComboChart';
   data = [
      ["Apples", 3, 2, 2.5],
      ["Oranges",2, 3, 2.5],
      ["Pears", 1, 5, 3],
      ["Bananas", 3, 9, 6],
      ["Plums", 4, 2, 3]
   ];
   columnNames = ['Fruits', 'Jane','Jone','Average'];
   options = {   
      hAxis: {
         title: 'Person'
      },
      vAxis:{
         title: 'Fruits'
      },
      seriesType: 'bars',
      series: {2: {type: 'line'}}
   };
   width = 550;
   height = 400;
}

結果

驗證結果。

Angular Google Charts - 直方圖

直方圖是一種將數值資料分組到區間中，並將區間顯示為分段柱的圖表。它們用於描述資料集的分佈，以及值落在哪些範圍內。Google Charts 會自動為您選擇區間數。所有區間寬度相等，高度與區間中資料點的數量成比例。直方圖在其他方面類似於柱狀圖。在本節中，我們將討論以下型別的基於直方圖的圖表。

序號	圖表型別/描述
1	基本直方圖基本直方圖。
2	控制顏色直方圖圖表自定義顏色。
3	控制桶直方圖圖表的自定義桶。
4	多個系列具有多個系列的直方圖圖表。

Angular Google Charts - 線性圖

線性圖用於繪製基於線的圖表。在本節中，我們將討論以下型別的基於線的圖表。

序號	圖表型別/描述
1	基本線基本線性圖。
2	顯示可見點顯示可見資料點的圖表。
3	可自定義的背景顏色具有自定義背景顏色的圖表。
4	可自定義的線條顏色具有自定義線條顏色的圖表。
5	可自定義的軸和刻度標籤具有自定義軸和刻度標籤的圖表。
6	十字準線在選擇資料點時顯示十字準線的線性圖。
7	可自定義的線條樣式具有自定義線條顏色的圖表。
8	具有曲線線的線性圖具有平滑曲線線的圖表。

Angular Google Charts - 地圖圖表

Google 地圖圖表使用 Google 地圖 API 顯示地圖。資料值在地圖上顯示為標記。資料值可以是座標（經緯度對）或實際地址。地圖將相應縮放，以便包含所有已標識的點。

序號	圖表型別/描述
1	基本地圖基本 Google 地圖。
2	使用經緯度的地圖使用經緯度指定位置的地圖。

Angular Google Charts - 組織結構圖

以下是一個組織結構圖的示例。

組織結構圖有助於呈現節點層次結構，用於描繪組織中的上下級關係。例如，家譜是一種組織結構圖。我們已經在Google Charts 配置語法章節中看到了用於繪製圖表的配置。現在，讓我們來看一個組織結構圖的示例。

配置

我們使用了OrgChart類來顯示組織結構圖。

type='OrgChart';

示例

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type = 'OrgChart';
   data = [
      [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
         '', 'The President'],
      [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
         'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
   ];
   columnNames = ["Name","Manager","Tooltip"];
   options = {   
      allowHtml: true
   };
   width = 550;
   height = 400;
}

結果

驗證結果。

Angular Google Charts - 餅圖

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

序號	圖表型別/描述
1	基本餅圖基本餅圖。
2	環形圖環形圖。
3	3D 餅圖 3D 餅圖。
4	帶有爆炸切片的餅圖帶有爆炸切片的餅圖。

Angular Google Charts - Sankey 圖表

Sankey 圖表是一種視覺化工具，用於描繪從一組值到另一組值的流程。連線的物件稱為節點，連線稱為連結。Sankey 圖表用於顯示兩個域之間的多對多對映或透過一組階段的多個路徑。

序號	圖表型別/描述
1	基本 Sankey 圖表基本 Sankey 圖表。
2	多級 Sankey 圖表多級 Sankey 圖表。
3	自定義 Sankey 圖表自定義 Sankey 圖表。

Angular Google Charts - 散點圖

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

我們已經在Google Charts 配置語法章節中看到了用於繪製圖表的配置。現在，讓我們來看一個散點圖的示例。

配置

我們使用了ScatterChart類來顯示散點圖。

type = 'ScatterChart';

示例

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Age vs Weight';
   type='ScatterChart';
   data = [
      [8,12],
      [4, 5.5],
      [11,14],
      [4,5],
      [3,3.5],
      [6.5,7]
   ];
   columnNames = ['Age', 'Weight'];
   options = {   
   };
   width = 550;
   height = 400;
}

結果

驗證結果。

Angular Google Charts - 階梯圖

階梯面積圖是基於階梯的面積圖。我們將討論以下型別的階梯面積圖。

序號	圖表型別/描述
1	基本階梯圖基本階梯面積圖。
2	堆疊階梯圖堆疊階梯面積圖。

Angular Google Charts - 表格圖表

表格圖表有助於呈現可排序和分頁的表格。可以使用格式字串或直接插入 HTML 作為單元格值來格式化表格單元格。數值預設情況下右對齊；布林值顯示為複選標記或叉號。使用者可以使用鍵盤或滑鼠選擇單行。列標題可用於排序。滾動時標題行保持固定。表格會觸發與使用者互動相對應的事件。

我們已經在Google Charts 配置語法章節中看到了用於繪製圖表的配置。現在，讓我們來看一個表格圖表的示例。

配置

我們使用了Table類來顯示錶格圖表。

type = 'Table';

示例

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = "";
   type = 'Table';
   data = [
      ['Mike',  {v: 10000, f: '$10,000'}, true],
      ['Jim',   {v:8000,   f: '$8,000'},  false],
      ['Alice', {v: 12500, f: '$12,500'}, true],
      ['Bob',   {v: 7000,  f: '$7,000'},  true]
   ];
   columnNames = ["Name", "Salary","Full Time Employee"];
   options = { 
     alternatingRowStyle:true,
     showRowNumber:true  
   };
   width = 550;
   height = 400;
}

結果

驗證結果。

Angular Google Charts - 樹狀圖

TreeMap 是資料樹的視覺化表示，其中每個節點可以有零個或多個子節點，以及一個父節點（根節點除外）。每個節點顯示為一個矩形，可以根據我們分配的值來調整大小和顏色。大小和顏色相對於圖中的所有其他節點進行估值。以下是一個樹狀圖的示例。

我們已經在Google Charts 配置語法章節中看到了用於繪製圖表的配置。現在，讓我們來看一個TreeMap 圖表的示例。

配置

我們使用了TreeMap類來顯示TreeMap 圖表。

type = 'TreeMap';

示例

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type='TreeMap';
   data = [
      ["Global",null,0,0],
      ["America","Global",0,0],
      ["Europe","Global",0,0],
      ["Asia","Global",0,0],
      ["Australia","Global",0,0],
      ["Africa","Global",0,0],

      ["USA","America",52,31],
      ["Mexico","America",24,12],
      ["Canada","America",16,-23],

      ["France","Europe",42,-11],
      ["Germany","Europe",31,-2],
      ["Sweden","Europe",22,-13],

      ["China","Asia",36,4],
      ["Japan","Asia",20,-12],
      ["India","Asia",40,63],

      ["Egypt","Africa",21,0],
      ["Congo","Africa",10,12],
      ["Zaire","Africa",8,10],
          
   ];
   columnNames = ["Location", "Parent","Market trade volume (size)","Market increase/decrease (color)"];
   options = { 
      minColor:"#ff7777",
      midColor:'#ffff77',
      maxColor:'#77ff77',
      headerHeight:15,
      showScale:true
   };
   width = 550;
   height = 400;
}

結果

驗證結果。

列印頁面

序號	圖表型別/描述
1	基本面積圖基本面積圖
2	包含負值的面積圖具有負值的面積圖。
3	堆疊面積圖圖表具有相互堆疊的區域。
4	包含缺失點的面積圖資料中包含缺失點的圖表。

序號	圖表型別/描述
1	基本條形圖基本條形圖
2	分組條形圖分組條形圖。
3	堆疊條形圖圖表具有相互堆疊的條形。
4	負條形圖具有負堆疊的條形圖。

序號	圖表型別/描述
1	基本柱狀圖基本柱狀圖
2	分組柱狀圖分組柱狀圖。
3	堆疊柱狀圖圖表具有相互堆疊的柱狀。
4	負堆疊柱狀圖具有負堆疊的柱狀圖。

序號	圖表型別/描述
1	基本直方圖基本直方圖。
2	控制顏色直方圖圖表自定義顏色。
3	控制桶直方圖圖表的自定義桶。
4	多個系列具有多個系列的直方圖圖表。

序號	圖表型別/描述
1	基本線基本線性圖。
2	顯示可見點顯示可見資料點的圖表。
3	可自定義的背景顏色具有自定義背景顏色的圖表。
4	可自定義的線條顏色具有自定義線條顏色的圖表。
5	可自定義的軸和刻度標籤具有自定義軸和刻度標籤的圖表。
6	十字準線在選擇資料點時顯示十字準線的線性圖。
7	可自定義的線條樣式具有自定義線條顏色的圖表。
8	具有曲線線的線性圖具有平滑曲線線的圖表。