長條圖,用Google畫圖表教學範例
Google視覺化應用程式介面(Google Visualization API)有許多javascript製成的圖表工具供開發者使用,相較Google Chart API方便的直接代入網址參數來建立靜態圖片(可惜不支援中文),Visualization則可透過點選顯示更多訊息,提供與Chart不一樣的選擇…
範例來源:AJAX APIs Playground(Visualization API)
(點選長條圖可看詳細數值)
原始碼及註解說明:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages: ["columnchart"]});
</script>
<script type="text/javascript">
function drawVisualization() {
var data = new google.visualization.DataTable();
// 設定X軸和Y軸
data.addColumn("string", "Name");
data.addColumn("number", "股價");
// 設定欄位數量
data.addRows(4);
// 設定X軸欄位名稱
data.setCell(0, 0, "中美晶");
data.setCell(1, 0, "合晶");
data.setCell(2, 0, "綠能");
data.setCell(3, 0, "德淵");
// 設定Y軸欄位值
data.setCell(0, 1, 68.0);
data.setCell(1, 1, 41.9);
data.setCell(2, 1, 98.7);
data.setCell(3, 1, 10.95);
// 建立ColumnChart圖表
new google.visualization.ColumnChart(document.getElementById("visualization")).
draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>
<!-- 圖表顯示位置及大小 -->
<div id="visualization" style="width: 400px; height: 300px;"></div>
後記:
Yahoo和Google都有提供類似的開發者支援工具,但就文件指引來看,Google顯然比較詳細,只是分的目錄及頁次也多,真希望能有中文版…(Google Code官網)
找到一個使用Google Chart API設計的各式圖表工具,只要填寫表單設定值,就可以建立所需的圖表及對應的網址參數:Google Chart Creator