Google Charts 快速指南

Google Charts - 概述

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

特性

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

兼容性 - 在所有主流浏览器和移动平台（如 Android 和 iOS）上都能完美运行。
多点触控支持 - 支持 Android 和 iOS 等触摸屏平台上的多点触控。非常适合 iPhone/iPad 和基于 Android 的智能手机和平板电脑。
免费使用 - 开源且可免费用于非商业用途。
轻量级 - loader.js 核心库是一个极其轻量级的库。
简单的配置 - 使用 JSON 定义各种图表配置，非常易于学习和使用。
动态 - 允许在图表生成后修改图表。
多轴 - 不仅限于 x 轴和 y 轴。支持图表上的多轴。
可配置的工具提示 - 当用户将鼠标悬停在图表上的任何点时，会出现工具提示。googlecharts 提供内置格式化程序或回调格式化程序来以编程方式控制工具提示。
日期时间支持 - 特殊处理日期时间。提供许多内置控件来控制日期类别。
打印 - 使用网页打印图表。
外部数据 - 支持从服务器动态加载数据。使用回调函数控制数据。
文本旋转 - 支持任何方向的标签旋转。

支持的图表类型

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

序号	图表类型和描述
1	折线图用于绘制基于线/样条线的图表。
2	面积图用于绘制基于区域的图表。
3	饼图用于绘制饼图。
4	Sankey 图、散点图、阶梯面积图、表格图、时间轴图、树状图、趋势线图用于绘制散点图。
5	气泡图用于绘制基于气泡的图表。
6	动态图表用于绘制动态图表，用户可以修改图表。
7	组合图用于绘制各种图表的组合。
8	3D 图表用于绘制 3D 图表。
9	角度仪表用于绘制速度表类型的图表。
10	热力图用于绘制热力图。
11	树状图用于绘制树状图。

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

许可证

Google Charts 是开源的，可免费使用。请访问以下链接：服务条款。

Google Charts - 环境设置

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

安装 Google Charts

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

下载 - 从 https://developers.google.com/chart 本地下载并使用它。
CDN 访问 - 您还可以访问 CDN。CDN 将使您能够访问全球各地的区域数据中心，在本例中，Google Chart 托管在 https://www.gstatic.com/charts。

使用下载的 Google Chart

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

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

使用 CDN

在本教程中，我们始终使用 Google Chart 库的 CDN 版本。

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

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

Google Charts - 配置语法

本章将展示使用 Google Chart API 绘制图表所需的配置。

步骤 1：创建 HTML 页面

创建一个包含 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.charts.load 方法加载最新版本的 corecharts API。

步骤 2：创建配置

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() 方法在 container div 中绘制图表的配置。现在我们将配置各种参数来创建所需的 JSON 字符串。

标题

配置图表的选项。

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

数据表

配置要显示在图表上的数据。数据表是一个特殊的表格结构集合，包含图表的 data。数据表的列表示图例，行表示相应的数据。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]
]);

步骤 3：绘制图表

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

示例

以下是完整的示例：

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>

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

google.charts.setOnLoadCallback(drawChart);

结果

验证结果。

Google Charts - 面积图

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

序号	图表类型和描述
1	基本面积图基本面积图
2	带有负值的面积图具有负值的面积图。
3	堆叠面积图图表具有相互堆叠的区域。
4	百分比面积图数据以百分比表示的图表。
5	缺少点的面积图数据中缺少点的图表。
6	反转轴使用反转轴的面积图。

Google Charts - 柱状图

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

序号	图表类型和描述
1	基本柱状图基本柱状图
2	分组柱状图分组柱状图。
3	堆叠柱状图图表具有相互堆叠的柱状。
4	负堆叠柱状图带有负堆叠的柱状图。
5	百分比堆叠柱状图数据以百分比表示的柱状图。
6	Material 柱状图受 Material Design 启发的柱状图。
7	带有数据标签的柱状图带有数据标签的柱状图。

Google Charts - 气泡图

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

序号	图表类型和描述
1	基本气泡图基本气泡图。
2	带有数据标签的气泡图带有数据标签的气泡图。

Google Charts - 日历图

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

序号	图表类型和描述
1	基本日历图基本日历图。
2	带有自定义颜色的日历图自定义日历图。

Google Charts - K 线图

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

序号	图表类型和描述
1	基本 K 线图基本 K 线图。
2	带有自定义颜色的 K 线图自定义 K 线图。

Google Charts - 条形图

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

序号	图表类型和描述
1	基本条形图基本条形图。
2	分组条形图分组条形图。
3	堆叠条形图图表具有相互堆叠的条形。
4	负堆叠条形图带有负堆叠的条形图。
5	百分比堆叠条形图数据以百分比表示的条形图。
6	Material 条形图受 Material Design 启发的条形图。
7	带有数据标签的条形图带有数据标签的条形图。

Google Charts - 组合图

组合图有助于将每个序列呈现为以下列表中的不同标记类型：折线、面积图、柱状图、K 线图和阶梯面积图。要为序列分配默认标记类型，请使用 seriesType 属性。Series 属性用于单独指定每个序列的属性。我们已经在 Google Charts 配置语法一章中看到了用于绘制此图表的配置。因此，让我们看看完整的示例。

配置

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

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

示例

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>

结果

验证结果。

Google Charts - 直方图

直方图是一种将数值数据分组到存储桶中的图表，并将存储桶显示为分段列。它们用于描述数据集的分布，以及值落在哪个范围内的频率。Google Charts 会自动为您选择存储桶的数量。所有存储桶的宽度相等，高度与存储桶中数据点的数量成比例。直方图在其他方面类似于柱状图。在本节中，我们将讨论以下类型的基于直方图的图表。

序号	图表类型和描述
1	基本直方图基本直方图。
2	控制颜色自定义直方图的颜色。
3	控制存储桶自定义直方图的存储桶。
4	多个序列具有多个序列的直方图。

Google Charts - 折线图

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

序号	图表类型和描述
1	基本折线图基本折线图。
2	带有可见点带有可见数据点的图表。
3	可自定义的背景颜色具有自定义背景颜色的图表。
4	可自定义的线条颜色具有自定义线条颜色的图表。
5	可自定义的轴和刻度标签具有自定义轴和刻度标签的图表。
6	十字准线在选择时在数据点上显示十字准线的折线图。
7	可自定义的线条样式具有自定义线条颜色的图表。
8	带有曲线线的折线图带有平滑曲线线的图表。
9	Material 折线图受 Material Design 启发的折线图。
10	顶部 X 轴折线图受 Material Design 启发的折线图，X 轴位于图表顶部。

Google Charts - 地图

Google 地图图表使用 Google 地图 API 来显示地图。数据值显示为地图上的标记。数据值可以是坐标（经纬度对）或实际地址。地图将相应缩放，以便包含所有已识别的点。

序号	图表类型和描述
1	基本地图基本 Google 地图。
2	使用经纬度的地图使用经纬度指定位置的地图。
3	自定义标记地图中的自定义标记。

Google Charts - 组织结构图

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

配置

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

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

示例

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>

结果

验证结果。

Google Charts - 饼图

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

序号	图表类型和描述
1	基本饼图基本饼图。
2	环形图环形图。
3	3D 饼图 3D 饼图。
4	带有爆炸切片的饼图带有爆炸切片的饼图。

Google Charts - Sankey 图

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

序号	图表类型和描述
1	基本桑基图基本桑基图。
2	多级桑基图多级桑基图。
3	自定义桑基图自定义桑基图。

Google Charts - 散点图

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

序号	图表类型和描述
1	基本散点图基本散点图。
2	材质散点图材质散点图。
3	双 Y 轴散点图具有双 Y 轴的材质散点图。
4	顶部 X 轴散点图具有顶部 X 轴的材质散点图。

Google Charts - 阶梯面积图

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

序号	图表类型和描述
1	基本阶梯图基本阶梯面积图。
2	堆叠阶梯图堆叠阶梯面积图。
3	100% 堆叠阶梯图 100% 堆叠阶梯面积图。

Google Charts - 表格图

表格图表有助于呈现可以排序和分页的表格。可以使用格式字符串或直接插入 HTML 作为单元格值来格式化表格单元格。数值默认情况下右对齐；布尔值显示为复选标记或叉号。用户可以使用键盘或鼠标选择单个行。列标题可用于排序。滚动时标题行保持固定。表格会触发与用户交互对应的事件。我们已经在Google Charts 配置语法章节中看到了绘制此图表所使用的配置。因此，让我们来看一个完整的示例。

配置

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

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

示例

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>

结果

验证结果。

Google Charts - 时间轴图表

时间轴图显示了一组资源随时间的推移如何使用。我们将讨论以下类型的时间轴图表。

序号	图表类型/描述
1	基本时间轴图表基本时间轴图表
2	带有数据标签的时间轴图表带有数据标签的时间轴图表
3	没有行标签的时间轴图表没有行标签的时间轴图表
4	时间轴图表着色自定义时间轴图表

Google Charts - 树状图

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

配置

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

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

示例

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>

结果

验证结果。

Google Charts - 趋势线图表

趋势线是叠加在图表上的线，用于揭示数据的整体方向。Google Charts 可以自动为桑基图、散点图、阶梯面积图、表格、时间轴、树状图、趋势线、条形图、柱状图和折线图生成趋势线。我们将讨论以下类型的趋势线图表。

序号	图表类型和描述
1	基本趋势线图表基本趋势线图表。
2	指数趋势线图表指数趋势线图表。
3	多项式趋势线图表多项式趋势线图表。

打印页面

序号	图表类型和描述
1	基本面积图基本面积图
2	带有负值的面积图具有负值的面积图。
3	堆叠面积图图表具有相互堆叠的区域。
4	百分比面积图数据以百分比表示的图表。
5	缺少点的面积图数据中缺少点的图表。
6	反转轴使用反转轴的面积图。

序号	图表类型和描述
1	基本柱状图基本柱状图
2	分组柱状图分组柱状图。
3	堆叠柱状图图表具有相互堆叠的柱状。
4	负堆叠柱状图带有负堆叠的柱状图。
5	百分比堆叠柱状图数据以百分比表示的柱状图。
6	Material 柱状图受 Material Design 启发的柱状图。
7	带有数据标签的柱状图带有数据标签的柱状图。

序号	图表类型和描述
1	基本条形图基本条形图。
2	分组条形图分组条形图。
3	堆叠条形图图表具有相互堆叠的条形。
4	负堆叠条形图带有负堆叠的条形图。
5	百分比堆叠条形图数据以百分比表示的条形图。
6	Material 条形图受 Material Design 启发的条形图。
7	带有数据标签的条形图带有数据标签的条形图。

序号	图表类型和描述
1	基本直方图基本直方图。
2	控制颜色自定义直方图的颜色。
3	控制存储桶自定义直方图的存储桶。
4	多个序列具有多个序列的直方图。

序号	图表类型和描述
1	基本折线图基本折线图。
2	带有可见点带有可见数据点的图表。
3	可自定义的背景颜色具有自定义背景颜色的图表。
4	可自定义的线条颜色具有自定义线条颜色的图表。
5	可自定义的轴和刻度标签具有自定义轴和刻度标签的图表。
6	十字准线在选择时在数据点上显示十字准线的折线图。
7	可自定义的线条样式具有自定义线条颜色的图表。
8	带有曲线线的折线图带有平滑曲线线的图表。
9	Material 折线图受 Material Design 启发的折线图。
10	顶部 X 轴折线图受 Material Design 启发的折线图，X 轴位于图表顶部。