Angular Google 图表 - 快速指南

Angular Google 图表 - 概述

Google Charts是一个纯基于 JavaScript 的图表库，旨在通过添加交互式图表功能来增强 Web 应用程序。它支持多种图表。图表是在 Chrome、Firefox、Safari、Internet Explorer(IE) 等标准浏览器中使用 SVG 绘制的。在旧版 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	角度规用于绘制速度计类型图表。
10	热图用于绘制热图。
11	树图用于绘制树图。

在接下来的章节中，我们将通过示例详细讨论上述每种类型的图表。

执照

Google Charts 是开源的，可以免费使用。点击链接 -服务条款。

Angular Google Charts - 环境设置

本教程将指导您如何准备开发环境以开始使用 Google Charts 和 Angular Framework。在本章中，我们将讨论 Angular 6 所需的环境设置。要安装 Angular 6，我们需要以下内容 -

Nodejs
尼普
角度 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 图表包装器

运行以下命令在创建的项目中安装 Google Charts Wrapper 模块。

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

例子

考虑以下示例以进一步理解配置语法 -

应用程序组件.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 属性。系列属性用于单独指定每个系列的属性。以下是显示差异的柱形图示例。

我们已经在Google Charts 配置语法章节中看到了用于绘制图表的配置。现在，让我们看一个显示差异的柱形图示例。

配置

我们使用ComboChart类来显示组合图表。

type='ComboChart';

例子

应用程序组件.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	基本地图基本的谷歌地图。
2	使用纬度/经度的地图具有使用纬度和经度指定位置的地图。

Angular Google Charts - 组织结构图

以下是组织结构图的示例。

组织结构图有助于呈现节点的层次结构，用于描绘组织中的上级/下级关系。例如，家谱是一种组织结构图。我们已经在Google Charts 配置语法章节中看到了用于绘制图表的配置。现在，让我们看一个组织结构图的示例。

配置

我们使用OrgChart类来显示组织结构图。

type='OrgChart';

例子

应用程序组件.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 - 桑基图表

桑基图是一种可视化工具，用于描述从一组值到另一组值的流动。连接的对象称为节点，连接称为链接。Sankeys 用于显示两个域之间的多对多映射或通过一组阶段的多个路径之间的多对多映射。

先生编号	图表类型/描述
1	基本桑基图基本桑基图。
2	多级桑基图多级桑基图。
3	自定义桑基图定制桑基图。

Angular Google Charts - 散点图

以下是散点图的示例。

我们已经在Google Charts 配置语法章节中看到了用于绘制图表的配置。现在，让我们看一个散点图的示例。

配置

我们使用ScatterChart类来显示散点图。

type = 'ScatterChart';

例子

应用程序组件.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';

例子

应用程序组件.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';

例子

应用程序组件.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	带有曲线的折线图具有平滑曲线的图表。