Google Visualization API (2) - The "Hello World" of Using Visualizations

先來一個最基本的 pie chart:

&lt;html> &lt;head> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["piechart"]}); google.setOnLoadCallback(drawChart); // Set callback to run when API is loaded function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours per Day'); data.addRows(5); data.setValue(0, 0, 'Work'); data.setValue(0, 1, 11); data.setValue(1, 0, 'Eat'); data.setValue(1, 1, 2); data.setValue(2, 0, 'Commute'); data.setValue(2, 1, 2); data.setValue(3, 0, 'Watch TV'); data.setValue(3, 1, 2); data.setValue(4, 0, 'Sleep'); data.setValue(4, 1, 7); var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'}); } </script> &lt;/head> &lt;body> <div id="chart_div"></div> &lt;/body> &lt;/html> 上面的 code 會產生底下這個例子. 而且這個 chart 是可以互動的, 試著點上面的圖案看看.

Including the Visualization API on Your Page
使用 Visualization API 需要引用 Google AJAX APIs script tag 還有呼叫 google.load("visualization", "1");, 以及使用 packages 屬性來指定你要使用的 visualization 名稱: <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["piechart"]}); function drawChart() { // Called once the Visualization API is loaded } google.setOnLoadCallback(drawChart); // Set callback to run when API is loaded </script> 如果要引用多種 visualization package 的話: google.load("visualization", "1", {packages:["piechart", "table", "linechart"]}); 在 Visualization Gallery 可以找到每個 visualization 的名稱, 文件以及載入的指示.

Creating a DataTable
所有 visualization 的資料都是使用 DateTable class 建立的. DataTable 是一個二維的表格, 由 rows, columns, cells 組成. 每個 column 都有定義資料類型. var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours per Day'); data.addRows(5); data.setValue(0, 0, 'Work'); // Row 0, column 0 data.setValue(0, 1, 11); // Row 0, column 1 data.setValue(1, 0, 'Eat'); // Row 1, column 0 data.setValue(1, 1, 2); data.setValue(2, 0, 'Commute'); data.setValue(2, 1, 2); data.setValue(3, 0, 'Watch TV'); data.setValue(3, 1, 2); data.setValue(4, 0, 'Sleep'); data.setValue(4, 1, 7);
Adding a Visualization
建構 visualization 的時候必須提供一個 DOM element 參數, 用來指定繪製的時候要出現在哪. 並且呼叫 draw 方法將圖案繪製在指定的容器裡. draw 方法需要兩個參數: 一個是 DataTable, 另外一個是選擇性參數. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'}); 當資料或是選擇的參數改變的時候, draw 方法可以多次呼叫.