利用Google Chart制作图表
2011-07-21 08:15 focusdada 阅读(352) 评论(0) 编辑 收藏 举报· Google Chart 提供了一系列生成图表的在线服务。
我们来学习一下官方示例：
下面是示例的完整源代码：
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn(\'string\', \'Year\');
data.addColumn(\'number\', \'Sales\');
data.addColumn(\'number\', \'Expenses\');
data.addRows(4);
data.setValue(0, 0, \'2004\');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, \'2005\');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, \'2006\');
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 0, \'2007\');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
var chart = new google.visualization.ColumnChart(document.getElementById(\'chart_div\'));
chart.draw(data, {width: 400, height: 240, title: \'Company Performance\',
hAxis: {title: \'Year\', titleTextStyle: {color: \'red\'}}
});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
这个示例按照如下流程进行：
- 动态加载 Google Chart 必须的类库，并在加载完毕后调用回调函数 drawChart
- 在 drawChart 函数中，其实在创建一个 DataTable，它拥有 3 个列，分别是年份，销售额和消费支出， 这 3 列的数据类型分别是字符串，数字和数字，然后向其中添加了 4 条数据。
- 调用 ColumnChart 的构造函数来初始化图表。