Google AJAX API 学习笔记之一:Google Visualization API

Google Visualization API是Google提供的AJAX API的一部分。本笔记参照Google Visualization API的文档所记录。

快速入门

按部就班用Google Visualization API:

准备用于显示图表的div

只要准备一个空的div,指定一个ID。这样,就能在脚本中找到这个div,并显示图表了。

<div id="my_chart"></div>

载入JavaScript

这没什么好说的,调用库之前必须载入库。方法也就是通常加载JavaScript方法。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

编写脚本

无论你是使用外部脚本,还是直接在HTML中嵌入脚本,下面开始写脚本。

加载脚本

假设我们使用的是外部脚本(名为my_chart.js),在加载Google AJAX API的那行之后添加:

<script type="text/javascript" src="my_chart.js"></script>

添加如下内容:

// 加载Google Visualization库
google.load('visualization', '1', {'packages':['piechart']});
 
// 添加一个回调函数
google.setOnLoadCallback(drawChart);
 
// 定义这个回调函数
function drawChart() {
  // 开始画图
  ...
}

一个网页上只需加载Google Visualization的库一次(也就是调用一次load()函数。)如果要使用多种不同的图形风格,可以在load()函数中使用package参数进行指定。

准备数据

首先,创建一个保存数据的变量:

var data = new google.visualization.DataTable();

然后,设置数据列的类型和名称:

data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');

addColumn()函数接受三个参数。第一个参数是数据类型,用字符串表示;第二个参数是数据列的ID,可选;第三个参数是数据列的标签,可选。不同类型的图表对数据表的要求也不同。饼图通常需要两个列,一个列是字符串,表示标签;另一列是数字,表示数值大小。而折线图则需要两个均为数字的列,分别表示X轴和Y轴。

用addRows()添加数据本身;这个函数接受一个多维数组。

下面是添加数据的完整代码:

var data = new google.visualization.DataTable();
 
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
 
// 添加数据
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', 7]
  ]);

创建图表实例

创建一个变量,保存图标实例:

var chart = new google.visualization.PieChart(document.getElementById('my_chart'));

绘制图表

调用图表对象的draw()方法可以实现图表的绘制。如下。其中第一个参数是图表数据变量;第二个数据是一个属性哈希数组(其实是对象,这是JS对对象属性赋值的一个简写方法)。可以指定图表宽度(width);高度(height),是否是3D(is3D),以及图表的标题(title)。

chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

更多关于文中提到的函数的参数,请参考Google Visualization API的文档

数据查询

待续

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License