转帖：一分钟教会你用google图表中的曲线图和柱状图

闯荡江湖 2012-09-04 11:42:00

原文地址：http://2sitebbs.com/thread-671-1-1.html

毋庸置疑谷歌的图表api是非常棒的，
又非常稳定的且灵活的图表解决‘方案。

下面介绍一个简单的例子，
旨在为需要用到google图表尤其是它的曲线图(LineChart)和柱状图(ColChart)的朋友快速集成提供帮助。

迅速集成google图表的曲线图或柱状图的详细步骤如下：

1、第一步：把google的javascript api文件引入到你的网页中来；
在网页的html代码中加入如下代码：
<script src="https://www.google.com/jsapi"></script>
复制代码
注意：
此文件需在你的调用google图表的js代码前面引入。

2、第二步：引入曲线图和柱状图js封装函数代码到你的网页中来；
直接引入外部js文件：
<script src="http://usedcar/js/search-min.js"></script>
复制代码

或者把下面这个简单的封装函数加到你的js代码中去：
/**
* functions for chart
* --参数说明--
* sId: 用来展示google图标的标签的id名
* sType: 图表的类型，曲线图或者柱状图；可选值：col 和 line
* sTitle: 图表的标题
* oData: 图表数据，是个二维数组，第一个元素是x轴和y轴的标题，格式如：[['x轴数据标题', 'y轴数据标题'], ['xValue 1', 'yValue 1'], ...]
* max: y轴高度的最大值
*/
function showChart(sId, sType, sTitle, oData, max) {
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function () {
var data = google.visualization.arrayToDataTable(oData);

var options = {
title: sTitle,
width: 720,
height: 200,
chartArea: {left: 30, width: '98%', top: 25, height: '75%'},
titleTextStyle: {color:'#666', fontSize: '14px'},
curveType: "function",
vAxis: {maxValue: max}
};

if (sType == 'line') {
var chart = new google.visualization.LineChart(document.getElementById(sId));
}else if (sType == 'col'){
var chart = new google.visualization.ColumnChart(document.getElementById(sId));
}
chart.draw(data, options);
});
}
复制代码

3、第三步：以php为例，拼装图表数据；
示例代码：
//给图表设置x轴和y轴的数据标题
$oDataCity = array(array('City', '均价/万'));
//$citys是一个从db查询出来的保存了多个城市数据的数组，它其中包含cityName和price两个字段
foreach ($citys as $key => $val) {
$oDataCity[] = array($val['cityName'], $val['price']);
}
复制代码

4、第四步：把数据输出到js代码中，调用showChart()函数显示图表；
示例代码：
//准备参数
$sData = json_encode($oDataCity);
$chartType = 'col';
$chartTitle = '全国各大城市二手车热销品牌排行';
$maxXValue = 100;

//输出调用显示图表函数的js代码
echo <<<eof
<script>
(function(){
var sId = 'gchart',
sType = '{$chartType}',
sTitle = '{$chartTitle}';
var oData = eval('({$sData})');
showChart(sId, sType, sTitle, oData, {$maxXValue});
})();
</script>
eof;
复制代码

简单四步就把google的柱状图集成到你的网页中了。

两个在线的示例：
柱状图在线示例：http://www.ruralusedcar.com/%E5%AE%9D%E9%A9%AC/#h1
曲线图在线示例：http://www.ruralusedcar.com/%E5%AE%9D%E9%A9%AC/city-%E6%B7%B1%E5%9C%B3/#h1

----欢迎转载，转载请注明原创出处，谢谢~----

...全文