Google 图表 - 快速指南

Google 图表 - 概述

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

特征

以下是 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 是开源的，可以免费使用。请点击链接：服务条款。

Google 图表 - 环境设置

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

安装谷歌图表

有两种使用 Google 图表的方法。

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

使用下载的 Google 图表

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

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

使用CDN

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

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

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

Google 图表 - 配置语法

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

第 1 步：创建 HTML 页面

使用 Google 图表库创建 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>

这里容器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() 方法通过容器 div 绘制图表的配置。现在我们将配置各种参数来创建所需的 json 字符串。

标题

配置图表的选项。

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

数据表

配置要在图表上显示的数据。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]
]);

第三步：绘制图表

// 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>

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

google.charts.setOnLoadCallback(drawChart);

结果

验证结果。

Google 图表 - 面积图

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

先生。	图表类型和描述
1	基本区基本面积图
2	具有负值的区域面积图具有负值。
3	堆叠面积图表中的区域相互堆叠。
4	百分比面积以百分比形式显示数据的图表。
5	缺失点的区域数据中缺少点的图表。
6	倒轴使用倒轴的区域。

Google Charts - 条形图

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

先生。	图表类型和描述
1	基本酒吧基本条形图
2	分组条形图分组条形图。
3	堆叠条条形图相互堆叠。
4	负堆叠条带有负堆栈的条形图。
5	百分比堆叠条包含百分比数据的条形图。
6	材料条形图受 Material Design 启发的条形图。
7	带数据标签的条形图带有数据标签的条形图。

Google 图表 - 气泡图

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

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

Google 图表 - 日历图表

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

先生。	图表类型和描述
1	基本日历基本日历图表。
2	带有定制颜色的日历定制日历图表。

Google 图表 - 烛台图

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

先生。	图表类型和描述
1	基本烛台基本蜡烛图。
2	具有定制颜色的烛台定制蜡烛图。

Google 图表 - 柱形图

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

先生。	图表类型和描述
1	基础栏目基本柱形图。
2	分组列分组柱形图。
3	堆积柱柱形图，柱形图相互堆叠。
4	负堆积柱带有负堆栈的柱形图。
5	百分比堆积柱包含百分比数据的柱形图。
6	材质柱形图受材料设计启发的柱形图。
7	带数据标签的柱形图带有数据标签的柱形图。

Google 图表 - 组合图表

组合图表有助于将每个系列呈现为以下列表中的不同标记类型：折线图、面积图、条形图、烛台图和阶梯式面积图。要为系列分配默认标记类型，请使用 seriesType 属性。系列属性用于单独指定每个系列的属性。我们已经在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 图表 - 折线图

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

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

Google 图表 - 地图

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

先生。	图表类型和描述
1	基本地图基本的谷歌地图。
2	使用纬度/经度的地图具有使用纬度和经度指定位置的地图。
3	自定义标记地图中的自定义标记。

Google 图表 - 组织结构图

组织结构图有助于呈现节点的层次结构，用于描绘组织中的上级/下级关系。例如，家谱是一种组织结构图。我们已经在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 图表 - 饼图

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

先生。	图表类型和描述
1	基本馅饼基本饼图。
2	圆环图甜甜圈图。
3	3D 饼图 3D 饼图。
4	带有分解切片的饼图带有分解切片的饼图。

谷歌图表 - 桑基图表

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

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

Google 图表 - 散点图

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

先生。	图表类型和描述
1	基本分散基本散点图。
2	材质散点图材料散点图。
3	双 Y 轴散点图具有双 Y 轴的材料散点图。
4	顶部 X 轴散点图 X 轴位于顶部的材料散点图。

Google Charts - 阶梯面积图

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

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

Google 图表 - 表格图表

表格图表有助于呈现可排序和分页的表格。可以使用格式字符串或直接插入 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 图表 - 树形图图表

TreeMap 是数据树的可视化表示，其中每个节点可能有零个或多个子节点以及一个父节点（根除外）。每个节点都显示为一个矩形，可以根据我们分配的值调整大小和颜色。大小和颜色的值是相对于图中所有其他节点而言的。以下是树形图的示例。我们已经在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 图表 - 趋势线图表

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

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

先生。	图表类型和描述
1	基本区基本面积图
2	具有负值的区域面积图具有负值。
3	堆叠面积图表中的区域相互堆叠。
4	百分比面积以百分比形式显示数据的图表。
5	缺失点的区域数据中缺少点的图表。
6	倒轴使用倒轴的区域。

先生。	图表类型和描述
1	基本酒吧基本条形图
2	分组条形图分组条形图。
3	堆叠条条形图相互堆叠。
4	负堆叠条带有负堆栈的条形图。
5	百分比堆叠条包含百分比数据的条形图。
6	材料条形图受 Material Design 启发的条形图。
7	带数据标签的条形图带有数据标签的条形图。

先生。	图表类型和描述
1	基础栏目基本柱形图。
2	分组列分组柱形图。
3	堆积柱柱形图，柱形图相互堆叠。
4	负堆积柱带有负堆栈的柱形图。
5	百分比堆积柱包含百分比数据的柱形图。
6	材质柱形图受材料设计启发的柱形图。
7	带数据标签的柱形图带有数据标签的柱形图。

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

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

Google 图表 - 快速指南

Google 图表 - 概述

特征

支持的图表类型

执照

Google 图表 - 环境设置

安装谷歌图表

使用下载的 Google 图表

使用CDN

Google 图表 - 配置语法

第 1 步：创建 HTML 页面

第 2 步：创建配置

标题

数据表

第三步：绘制图表

例子

结果

Google 图表 - 面积图

Google Charts - 条形图

Google 图表 - 气泡图

Google 图表 - 日历图表

Google 图表 - 烛台图

Google 图表 - 柱形图

Google 图表 - 组合图表

配置

例子

结果

Google Charts - 直方图

Google 图表 - 折线图

Google 图表 - 地图

Google 图表 - 组织结构图

配置

例子

结果

Google 图表 - 饼图

谷歌图表 - 桑基图表

Google 图表 - 散点图

Google Charts - 阶梯面​​积图

Google 图表 - 表格图表

配置

例子

结果

Google Charts - 时间线图表

Google 图表 - 树形图图表

配置

例子

结果

Google 图表 - 趋势线图表

Google Charts - 阶梯面积图