Google Charts – 快速指南
Google Charts – 快速指南
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 提供工具提示内置格式化程序或回调格式化程序以编程方式控制工具提示。
-
日期时间支持– 专门处理日期时间。提供对日期明智类别的众多内置控件。
-
打印– 使用网页打印图表。
-
外部数据– 支持从服务器动态加载数据。使用回调函数提供对数据的控制。
-
文本旋转– 支持在任何方向上旋转标签。
支持的图表类型
谷歌图表库提供以下类型的图表 –
| Sr.No. | 图表类型和描述 |
|---|---|
| 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 用于绘制树状图。 |
在接下来的章节中，我们将通过示例详细讨论上述每种类型的图表。
执照
Google Charts 是开源的，可以免费使用。点击链接：服务条款。
Google Charts – 环境设置
在本章中，我们将讨论如何设置用于 Web 应用程序开发的 Google Charts 库。
安装谷歌图表
有两种使用 Google Charts 的方法。
-
下载– 从https://developers.google.com/chart在本地下载并使用它。
-
CDN 访问– 您还可以访问 CDN。CDN 将使您可以访问世界各地的区域数据中心，在这种情况下，Google Chart 托管https://www.gstatic.com/charts。
使用下载的谷歌图表
使用以下脚本在 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>
这里容器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]
]);
第 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 图表 – 面积图
面积图用于绘制基于面积的图表。在本节中，我们将讨论以下类型的基于面积的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Area
基本面积图 |
| 2 | Area with negative values
面积图具有负值。 |
| 3 | Stacked area
具有相互堆叠区域的图表。 |
| 4 | Percentage area
以百分比表示的数据图表。 |
| 5 | Area with missing points
数据中缺失点的图表。 |
| 6 | Inverted axes
使用倒轴的区域。 |
Google 图表 – 条形图
条形图用于绘制基于条形的图表。在本节中，我们将讨论以下类型的基于条形图的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Bar
基本条形图 |
| 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 – 气泡图
气泡图用于绘制基于气泡的图表。在本节中，我们将讨论以下类型的基于气泡的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Bubble
基本气泡图。 |
| 2 | Bubble chart with data labels
带有数据标签的气泡图。 |
Google Charts – 日历图表
日历图表用于在很长的时间跨度（如数月或数年）中绘制活动。在本节中，我们将讨论以下类型的基于日历的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Calendar
基本日历图表。 |
| 2 | Calendar with customized colors
自定义日历图表。 |
Google Charts – 烛台图
烛台图用于显示价值差异的开盘价和收盘价，通常用于表示股票。在本节中，我们将讨论以下基于烛台的图表类型。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Candlestick
基本烛台图表。 |
| 2 | Candlestick with customized colors
定制的烛台图。 |
Google 图表 – 柱状图
柱形图用于绘制基于柱形的图表。在本节中，我们将讨论以下类型的基于列的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Column
基本柱状图。 |
| 2 | Grouped Column
分组柱状图。 |
| 3 | Stacked Column
柱状图的柱状图相互堆叠。 |
| 4 | Negative Stacked Column
带有负堆栈的柱状图。 |
| 5 | Percentage Stacked Column
带有百分比数据的柱形图。 |
| 6 | Material Column Chart
Material Design 灵感的柱状图。 |
| 7 | Column Chart with data labels
带有数据标签的柱状图。 |
Google Charts – 组合图
组合图有助于将每个系列呈现为以下列表中的不同标记类型：线、区域、条、烛台和阶梯区域。要为系列分配默认标记类型，请使用 seriesType 属性。系列属性用于单独指定每个系列的属性。我们已经在Google Charts Configuration Syntax章节中看到了用于绘制此图表的配置。所以，让我们看看完整的例子。
配置
我们使用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 会自动为您选择桶数。所有桶的宽度相等，高度与桶中数据点的数量成正比。直方图在其他方面类似于柱状图。在本节中，我们将讨论以下类型的基于直方图的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Histogram
基本直方图。 |
| 2 | Controlling Color
直方图的自定义颜色。 |
| 3 | Controlling Buckets
定制的直方图桶。 |
| 4 | Multiple Series
具有多个系列的直方图。 |
谷歌图表 – 折线图
折线图用于绘制基于折线的图表。在本节中，我们将讨论以下类型的基于折线的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic line
基本折线图。 |
| 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 图表 – 地图
Google Map Chart 使用 Google Maps API 来显示地图。数据值在地图上显示为标记。数据值可以是坐标（经纬度对）或实际地址。地图将相应地进行缩放，以使其包括所有已识别的点。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Map
基本的谷歌地图。 |
| 2 | Map using Latitude/Longitude
使用纬度和经度指定位置的地图。 |
| 3 | Customizing markers
地图中的自定义标记。 |
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 图表 – 饼图
饼图用于绘制基于饼图的图表。在本节中，我们将讨论以下类型的基于饼图的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Pie
基本饼图。 |
| 2 | Donut Chart
甜甜圈图。 |
| 3 | 3D Pie chart
3D 饼图。 |
| 4 | Pie chart with exploded slices
带有爆炸切片的饼图。 |
谷歌图表 – 桑基图表
桑基图是一种可视化工具，用于描绘从一组值到另一组值的流程。连接的对象称为节点，连接称为链接。Sankeys 用于通过一组阶段显示两个域或多条路径之间的多对多映射。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Sankey Chart
基本桑基图。 |
| 2 | Multilevel Sankey Chart
多级桑基图。 |
| 3 | Customizing Sankey Chart
定制的桑基图。 |
Google Charts – 散点图
Sankey Charts、Scatter Charts、Stepped area charts、Table、Timelines、TreeMap、Trendlines 用于绘制散点图。在本节中，我们将讨论以下类型的基于散点的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Scatter
基本散点图。 |
| 2 | Material Scatter Chart
材料散点图。 |
| 3 | Dual Y Axis Scatter Chart
具有双 Y 轴的材料散点图。 |
| 4 | Top X Axis Scatter Chart
X 轴位于顶部的材料散点图。 |
Google Charts – 阶梯面积图
阶梯面积图是基于阶梯的面积图。我们将讨论以下类型的阶梯面积图。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Stepped Chart
基本阶梯面积图。 |
| 2 | Stacked Stepped Chart
堆积阶梯面积图。 |
| 3 | 100% Stacked Stepped Chart
100% 堆叠阶梯面积图。 |
Google Charts – 表格图表
表格图表有助于呈现可以排序和分页的表格。可以使用格式字符串或直接插入 HTML 作为单元格值来设置表格单元格的格式。数值默认右对齐；布尔值显示为复选标记或十字标记。用户可以使用键盘或鼠标选择单行。列标题可用于排序。滚动期间标题行保持固定。该表触发与用户交互相对应的事件。我们已经在Google Charts Configuration Syntax章节中看到了用于绘制此图表的配置。所以，让我们看看完整的例子。
配置
我们已经使用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 – 时间线图表
时间线描述了如何随着时间的推移使用一组资源。我们将讨论以下类型的时间线图表。
| Sr.No. | 图表类型/描述 |
|---|---|
| 1 | Basic Timelines Chart
基本时间线图 |
| 2 | Timelines Chart with data labels
带有数据标签的时间线图表 |
| 3 | Timelines chart without Row Label
没有行标签的时间线图表 |
| 4 | Timelines chart coloring
自定义时间线图表 |
谷歌图表 – 树状图
TreeMap 是数据树的可视化表示，其中每个节点可能有零个或多个子节点和一个父节点（根除外）。每个节点都显示为一个矩形，可以根据我们分配的值调整大小和颜色。大小和颜色相对于图中的所有其他节点进行评估。以下是树状图的示例。我们已经在Google Charts Configuration Syntax章节中看到了用于绘制此图表的配置。所以，让我们看看完整的例子。
配置
我们已经使用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 可以自动生成 Sankey Charts、Scatter Charts、Stepped area charts、Table、Timelines、TreeMap、Trendlines、Bar Charts、Column Charts 和 Line Charts 的趋势线。我们将讨论以下类型的趋势线图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Trendlines Chart
基本趋势线图表。 |
| 2 | Exponential Trendlines Chart
指数趋势线图表。 |
| 3 | Polynomial Trendlines Chart
多项式趋势线图。 |
