Googlecharts 简明教程

Google Charts - Quick Guide

Google Charts - Overview

Google Charts 是一个基于纯 JavaScript 的图表库，旨在通过增加交互式制图功能来增强 Web 应用程序。它支持各种图表。图表在标准浏览器（如 Chrome、Firefox、Safari、Internet Explorer (IE)）中使用 SVG 绘制。在旧版 IE 6 中，使用 VML 绘制图形。

Features

以下是 Google Charts 库的显著功能。

Compatability − 在所有主流浏览器和移动平台（如 Android 和 iOS）上无缝运行。
Multitouch Support − 支持在基于触摸屏的平台（如 Android 和 iOS）上进行多点触控。非常适合 iPhone/iPad 和基于 Android 的智能手机/平板电脑。
Free to Use − 开源，可免费用于非商业用途。
Lightweight − loader.js 核心库是一个极其轻量级的库。
Simple Configurations − 使用 JSON 定义图表的各种配置，并且非常容易学习和使用。
Dynamic − 允许在图表生成后修改图表。
Multiple axes − 不局限于 x、y 轴。支持图表上的多个轴。
Configurable tooltips − 当用户将鼠标悬停在图表上的任何点时，会出现工具提示。googlecharts 提供工具提示内置格式化工具或回调格式化工具，以编程方式控制工具提示。
DateTime support − 特别处理日期时间。提供对按日期分类的许多内置控件。
Print − 使用网页打印图表。
External data − 支持从服务器动态加载数据。使用回调函数控制数据。
Text Rotation − 支持任意方向旋转标签。

Supported Chart Types

Google Charts 库提供以下类型的图表−

Sr.No.	Chart Type & Description
1	Line Charts 用于绘制基于图线/样条线的图表。
2	Area Charts 用于绘制区域图表。
3	Pie Charts 用于绘制饼图。
4	Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines 用于绘制散点图。
5	Bubble Charts 用于绘制基于气泡的图表。
6	Dynamic Charts 用于绘制动态图表，用户可以修改图表。
7	Combinations 用于绘制组合图表。
8	3D Charts 用于绘制 3D 图表。
9	Angular Gauges 用于绘制速度计类型的图表。
10	Heat Maps 用于绘制热图。
11	Tree Maps 用于绘制树状图。

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

Licence

Google Charts 是开源的，并且免费使用。请单击以下链接： Terms of Service 。

Google Charts - Environment Setup

在本节中，我们将讨论如何在 Web 应用程序开发中设置 Google Charts 库。

Install Google Charts

有两种方法可以使用 Google Charts。

Download - 从 https://developers.google.com/chart 本地下载并使用它。
CDN access - 您还可以访问 CDN。在这种情况中，CDN 将使您能够访问全球各地的区域数据中心，而 Google Chart 则承载了 https://www.gstatic.com/charts 。

Using Downloaded Google Chart

使用以下脚本在 HTML 页面中包含 googlecharts JavaScript 文件：

<head>
   <script src = "/googlecharts/loader.js"></script>
</head>

Using CDN

使用以下脚本在 HTML 页面中包含 Google Chart JavaScript 文件：

<head>
   <script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>

Google Charts - Configuration Syntax

在此章节中，我们将展示使用 Google Chart API 绘制图表所需的配置。

Step 1: Create HTML Page

使用 Google Chart 库创建一个 HTML 页面。

googlecharts_configuration.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});
      </script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
   </body>
</html>

在此， container div 用于包含使用 Google Chart 库绘制的图表。在此，我们使用 google.carts.load 方法加载最新版本的 corecharts API。

Step 2: Create configurations

Google Chart 库使用非常简单的配置，采用 json 语法。

// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);

此处，data 表示 json 数据，options 表示 Google Chart 库用于使用 draw() 方法在容器 div 中绘制图表的配置。现在，我们将配置各种参数以创建必需的 json 字符串。

title

配置图表选项。

// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
   'width':550,
   'height':400};

DataTable

配置要显示在图表上的数据。DataTable 是一个特殊的表结构集合，其中包含图表数据。数据表列表示图例，行表示相应数据。addColumn() 方法用于添加列，其中第一个参数表示数据类型，第二个参数表示图例。addRows() 方法用于相应地添加行。

// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
   ['Firefox', 45.0],
   ['IE', 26.8],
   ['Chrome', 12.8],
   ['Safari', 8.5],
   ['Opera', 6.2],
   ['Others', 0.7]
]);

Step 3: Draw the chart

// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);

Example

以下是一个完整的示例：

googlecharts_configuration.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});
      </script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Browser');
            data.addColumn('number', 'Percentage');
            data.addRows([
               ['Firefox', 45.0],
               ['IE', 26.8],
               ['Chrome', 12.8],
               ['Safari', 8.5],
               ['Opera', 6.2],
               ['Others', 0.7]
            ]);

            // Set chart options
            var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};

            // Instantiate and draw the chart.
            var chart = new google.visualization.PieChart(document.getElementById ('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

在 Google Chart 库完全加载后，以下代码调用 drawChart 函数绘制图表。

google.charts.setOnLoadCallback(drawChart);

Result

验证结果。

Google Charts - Area Charts

面积图用于绘制基于面积的图表。在本节中，我们将讨论以下类型的基于面积的图表。

Sr.No.	Chart Type & Description
1	Basic AreaBasic area chart
2	Area with negative values 具有负值的面积图。
3	Stacked area 彼此叠加的区域图表。
4	Percentage area 以百分比表示数据的图表。
5	Area with missing points 数据中带有缺失点的图表。
6	Inverted axes 使用反转轴的区域。

Google Charts - Bar Charts

条形图用于绘制基于条形的图表。在这一部分中，我们将讨论以下类型的基于条形的图表。

Sr.No.	Chart Type & Description
1	Basic BarBasic bar chart
2	Grouped Bar Chart 分组条形图。
3	Stacked Bar 条形图中的条形依次叠置。
4	Negative Stacked bar 具有负叠加的条形图。
5	Percentage Stacked bar 数据的百分比形式条形图。
6	Material Bar Chart 受 Material Design 启发的条形图。
7	Bar Chart with data labels 带有数据标签的条形图。

Google Charts - Bubble Charts

气泡图用于绘制基于气泡的图表。在本部分中，我们将讨论以下类型的基于气泡的图表。

Sr.No.

Chart Type & Description

Basic BubbleBasic bubble chart.

Bubble chart with data labels 带有数据标签的气泡图。

Google Charts - Calendar Charts

日历图用于绘制一段时间（如几个月或几年）内的活动。在本节中，我们将讨论以下类型的基于日历的图表。

Sr.No.

Chart Type & Description

Basic CalendarBasic Calendar chart.

Calendar with customized colors 定制的日历图。

Google Charts - Candlestick Charts

蜡烛图用于显示开盘价和收盘价的价值差异，通常用于表示股票。在本节中，我们将讨论以下类型的基于蜡烛的图表。

Sr.No.

Chart Type & Description

Basic CandlestickBasic Candlestick chart.

Candlestick with customized colors 定制的蜡烛图。

Google Charts - Column Charts

柱状图用于绘制基于柱状图的图表。在本节中，我们将讨论以下类型的基于柱状图的图表。

Sr.No.	Chart Type & Description
1	Basic ColumnBasic Column chart.
2	Grouped ColumnGrouped Column chart.
3	Stacked Column 一列压着一列的柱形图。
4	Negative Stacked Column 带负向堆叠的柱形图。
5	Percentage Stacked Column 以百分比形式显示数据的柱形图。
6	Material Column Chart 一个受材料设计启发的柱形图。
7	Column Chart with data labels 带数据标签的柱形图。

Google Charts - Combination Chart

组合图表有助于将每个序列呈现为以下列表中不同的标记类型：线、区域、条形、蜡烛图和阶梯区域。要为序列分配默认标记类型，请使用 seriesType 属性。序列属性将用来分别指定每个序列的属性。我们已经在 Google Charts Configuration Syntax 章节中看到了用于绘制此图表的配置。，让我们看一个完整的例子。

Configurations

我们已经使用 ComboChart 类来显示基于组合的图表。

//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));

Example

googlecharts_combination_chart.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});
      </script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Fruit', 'Jane', 'John', 'Average'],
               ['Apples', 3, 2, 2.5],
               ['Oranges', 2, 3, 2.5],
               ['Pears', 1, 5, 3],
               ['Bananas', 3, 9, 6],
               ['Plums', 4, 2, 3]
            ]);

            // Set chart options
            var options = {
               title : 'Fruits distribution',
               vAxis: {title: 'Fruits'},
               hAxis: {title: 'Person'},
               seriesType: 'bars',
               series: {2: {type: 'line'}}
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.ComboChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

验证结果。

Google Charts - Histogram Charts

直方图是一个图表，它将数值数据分组为段，并将这些段显示为分段的列。它们用于描述数据集的分布情况，即值落入范围的频率。Google Charts 会自动为您选择段数。所有段等宽，高度与段中数据点的数量成比例。直方图在其他方面与柱状图类似。在该部分中，我们将讨论以下类型的基于直方图的图表。

Sr.No.	Chart Type & Description
1	Basic HistogramBasic Histogram chart.
2	Controlling Color 直方图的自定义颜色。
3	Controlling Buckets 直方图自定义区段。
4	Multiple Series 具有多个序列的直方图。

Google Charts - Line Charts

折线图用于绘制基于线的图表。在这一部分中，我们将讨论以下类型的基于线的图表。

Sr.No.	Chart Type & Description
1	Basic lineBasic line chart.
2	With visible points 具有可见数据点的图表。
3	Customizable background color 自定义背景颜色的图表。
4	Customizable line color 自定义线条颜色的图表。
5	Customizable axis and tick labels 自定义坐标轴和刻度标签的图表。
6	Crosshairs 在数据点选择时显示十字准线的折线图。
7	Customizable line style 自定义线颜色的图表。
8	Line Charts with curved lines 曲线平滑的图表。
9	Material Line Chart 受 Material Design 启发的折线图。
10	Top X Line Chart 受 Material Design 启发的折线图，其中 X 轴位于图表上方。

Google Charts - Maps

Google 地图图表使用 Google 地图 API 来显示地图。数据值在地图上以标记显示。数据值可以是坐标（纬度和经度对）或实际地址。将按比例缩放地图，以便其包括所有已标识的点。

Sr.No.

Chart Type & Description

Basic MapBasic Google Map.

Map using Latitude/Longitude 使用纬度和经度指定位置的地图。

Customizing markers 地图中的自定义标记。

Google Charts - Organization Chart

组织结构图用于呈现节点的层次结构，用于描绘组织中的上级/下级关系。例如，家谱就是一种组织结构图。我们已经在 Google Charts Configuration Syntax 章中了解了用于绘制此图表的配置。因此，我们来看看一个完整示例。

Configurations

我们使用了 OrgChart 类来显示基于组织结构的图表。

//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));

Example

googlecharts_organization_chart.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['orgchart']});
      </script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');

            // For each orgchart box, provide the name, manager, and tooltip to show.
            data.addRows([
               [{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
               [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
               ['Alice', 'Robert', ''],
               ['Bob', 'Jim', 'Bob Sponge'],
               ['Carol', 'Bob', '']
            ]);

            // Set chart options
            var options = {allowHtml:true};

            // Instantiate and draw the chart.
            var chart = new google.visualization.OrgChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

验证结果。

Google Charts - Pie Charts

饼状图用于绘制基于饼状图的图表。在本部分，我们将讨论以下类型的基于饼状图的图表。

Sr.No.	Chart Type & Description
1	Basic PieBasic pie chart.
2	Donut ChartDonut Chart.
3	3D Pie chart 3D 饼图。
4	Pie chart with exploded slices 饼图，其中扇区为展开状。

Google Charts - Sankey Charts

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

Sr.No.

Chart Type & Description

Basic Sankey Chart 基本圣骑士图。

Multilevel Sankey Chart 多级圣骑士图。

Customizing Sankey Chart 自定义圣骑士图。

Google Charts - Scatter Charts

Sankey 图、散点图、阶梯面积图、表格、时间线、树形图、趋势线用于绘制基于散点的图表。在本节中，我们将讨论以下基于散点的图表类型。

Sr.No.	Chart Type & Description
1	Basic ScatterBasic scatter chart.
2	Material Scatter Chart 材质散点图。
3	Dual Y Axis Scatter Chart 带有双 Y 轴的材质散点图。
4	Top X Axis Scatter Chart 在顶部带有 X 轴的材质散点图。

Google Charts - Stepped Area Charts

阶梯形面积图是一种基于阶梯的面积图。我们将讨论以下类型的阶梯形面积图。

Sr.No.

Chart Type & Description

Basic Stepped Chart 基本阶梯区域图。

Stacked Stepped Chart 堆积阶梯区域图。

100% Stacked Stepped Chart 100% 堆积阶梯区域图。

Google Charts - Table Chart

表格图表用于呈现一个可以排序和翻页的表格。可以使用格式字符串或直接插入 HTML 作为单元格值来设置表格单元格的格式。默认情况下，数值右对齐；布尔值显示为对号或错号。用户可以使用键盘或鼠标选择单行。可以使用列标题进行排序。在滚动期间，标题行保持固定。该表格触发与用户交互对应的事件。我们已经在 Google Charts Configuration Syntax 章中了解了用于绘制此图表的配置。因此，我们来看看一个完整示例。

Configurations

我们使用了 Table 类来显示基于表格的图表。

//table chart
var chart = new google.visualization.Table(document.getElementById('container'));

Example

googlecharts_table_chart.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['table']});
      </script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('number', 'Salary');
            data.addColumn('boolean', 'Full Time Employee');
            data.addRows([
               ['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]
            ]);

            var options = {
               showRowNumber: true,
               width: '100%',
               height: '100%'
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.Table(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

验证结果。

Google Charts - Timelines Charts

时间线描述了资源集在一段时间内如何使用。我们将探讨下列类型的时间线图表。

Sr.No.	Chart Type / Description
1	Basic Timelines Chart 基本时间线图表
2	Timelines Chart with data labels 带数据标签的时间线图表
3	Timelines chart without Row Label 无行标签的时间线图表
4	Timelines chart coloring 自定义时间线图表

Google Charts - TreeMap Chart

树状图是数据树的可视化表示，其中每个节点可存在零个或多个子级，并且存在一个父级（根除外）。每个节点显示为一个矩形，可根据我们分配的值进行大尺寸和颜色调整。大小和颜色相对于图表中的所有其他节点进行估值。以下是树状图的示例。我们已经在 Google Charts Configuration Syntax 章节中看到了此图表绘制使用的配置。因此，让我们看看完整的示例。

Configurations

我们使用 TreeMap 类来显示树状图。

//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));

Example

googlecharts_treemap.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript" src = "https://www.google.com/jsapi">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['treemap']});
      </script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            var data = google.visualization.arrayToDataTable([
               ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
               ['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]
            ]);
            var options = {
               minColor: '#f00',
               midColor: '#ddd',
               maxColor: '#0d0',
               headerHeight: 15,
               fontColor: 'black',
               showScale: true
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.TreeMap(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

验证结果。

Google Charts - Trendlines Charts

趋势线是在图表上叠加的线，用来显示数据整体趋势。Google Charts 可为圣骑士图、散点图、阶梯状面积图、表格、时间线、树状图、趋势线、条形图、柱形图和折线图自动生成趋势线。我们将探讨下列类型的趋势线图表。

Sr.No.

Chart Type & Description

Basic Trendlines Chart 基本趋势线图表。

Exponential Trendlines Chart 指数趋势线图表。

Polynomial Trendlines Chart 多项式趋势线图表。