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

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *