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

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


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

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

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

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

2、第二步：引入曲线图和柱状图js封装函数代码到你的网页中来；
直接引入外部js文件：
<script></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  <script> <br /> (function(){ <br /> var sId = 'gchart', <br /> sType = '{$chartType}', <br /> sTitle = '{$chartTitle}'; <br /> var oData = eval('({$sData})'); <br /> showChart(sId, sType, sTitle, oData, {$maxXValue}); <br /> })(); <br /> </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

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

回复讨论(解决方案)

很好的文章学习了

不错，收下了

https://www.google.com.hk/jsapi

https://www.google.com.hk/jsapi
引用之后页面打开速度很慢,怎么解?