原文地址： http://2sitebbs.com/thread-671-1-1.html
毋庸置疑Google的圖表api是非常棒的，
又非常穩定的且靈活的圖表解決‘方案。
下面介紹一個簡單的例子，
旨在為需要用到google圖表尤其是它的曲線圖(LineChart)和柱狀圖(ColChart)的朋友快速整合提供協助。
迅速整合google圖表的曲線圖或柱狀圖的詳細步驟如下：
1、第一步：把google的javascript api檔案引入到你的網頁中來；
在網頁的html代碼中加入如下代碼：
複製代碼
注意：
此檔案需在你的調用google圖表的js代碼前面引入。
2、第二步：引入曲線圖和柱狀圖js封裝函數代碼到你的網頁中來；
直接引入外部js檔案：
複製代碼
或者把下面這個簡單的封裝函數加到你的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;
複製代碼
簡單四步就把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
引用之後頁面開啟速度很慢,怎麼解?
