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的文档。
数据查询
待续