原文地址: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----欢迎转载,转载请注明原创出处,谢谢~----