長條圖,用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