<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> //Div that will hold the pie chart <div id="chart_div" style="width:400; height:300"></div> </body> </html>
最後一個步驟是繪製圖表。您必須先將您要使用的圖表類別的執行個體執行個體化,然後對該類別呼叫 draw()
。
將圖表執行個體化
每種圖表類型均以不同類別列出,請參閱圖表的說明文件。例如,圓餅圖以 google.visualization.PieChart
類別為基礎,長條圖以 google.visualization.BarChart
類別為基礎,依此類推。圓餅圖和長條圖都包含在本教學課程開頭載入的核心圖表套件中。不過,如果您想在網頁上使用樹狀圖或地理圖,就必須另外載入「樹狀圖」或「地理區域」套件。
Google 圖表建構函式會採用單一參數:要繪製視覺化圖表的 DOM 元素參照。
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
繪製圖表
備妥資料與選項後,您就可以開始繪製圖表了。
您的網頁必須包含 HTML 元素 (通常是 <div>
),才能保存圖表。
您必須將圖表的參照傳遞給這個元素,因此請為其指派 ID,以便透過 document.getElementById()
擷取參照。此元素中的任何內容在繪製時都會被圖表取代。請考慮是否應明確指定這個 <div>
元素的大小,但目前請在 <div>
HTML 中指定圖表大小。
每個圖表都支援 draw()
方法,該值採用兩個值:含有資料的 DataTable
(或 DataView
) 物件,以及選用的圖表選項物件。您不一定要使用選項物件,可以忽略該物件,或傳入 null,使用圖表的預設選項。
呼叫 draw()
後,您的圖表將顯示在頁面上。每當您變更資料或選項,並想更新圖表時,應呼叫 draw()
方法。
draw()
方法為非同步性質:也就是說,它會立即傳回,但傳回的執行個體可能無法立即使用。這在大多時候不會造成任何影響;系統會繪製圖表。不過,如果您在呼叫 draw()
之後想設定圖表或擷取值,就必須等待圖表擲回就緒的事件,表示已填入資料。我們會在下一頁說明監聽事件。
疑難排解
如果頁面上沒有繪製圖表,以下方法可協助您解決問題:
- 檢查是否有錯字。請記住,JavaScript 是區分大小寫的語言。
- 使用 JavaScript 除錯工具。在 Firefox 中,您可以使用 JavaScript 主控台、Venkman 偵錯工具或 Firebug 外掛程式。您可以在 Chrome 中使用開發人員工具 (Shift + Ctl + J)。
- 搜尋 Google 視覺化 API 討論群組。如果找不到解答問題的貼文,請將您的問題張貼到群組中,並附上可呈現該問題的網頁連結。