本頁列出在頁面上建立圖表例項及繪製圖表的各種方式。每個方法各有優缺點，如下所示。
目錄
chart.draw()
這是本文件中 Hello Chart! 範例中提及的基本方法。以下是基本步驟：
- 載入 gstatic 程式庫載入器、Google 視覺化和圖表程式庫
- 準備資料
- 備妥任何圖表選項
- 將圖表類別例項化，並傳入網頁容器元素的控制代碼。
- 視需要註冊即可接收任何圖表事件。如果您想呼叫圖表上的方法，則應監聽「Ready」事件。
- 呼叫
chart.draw()，傳入資料和選項。
優點：
- 您可以完全控制流程中的每個步驟。
- 您可以註冊以監聽圖表擲回的所有事件。
缺點：
- 詳細
- 您必須明確載入所有必要的圖表程式庫。
- 如果您傳送查詢，必須手動實作回呼、檢查成功、擷取傳回的
DataTable，然後傳送至圖表。
範例：
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var data;
var chart;
// 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 our data table.
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.
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
function selectHandler() {
var selectedItem = chart.getSelection()[0];
var value = data.getValue(selectedItem.row, 0);
alert('The user selected ' + value);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
ChartWrapper
ChartWrapper 是便利的類別，可為您載入所有適當的圖表程式庫，並簡化將查詢傳送至圖表工具資料來源。
優點：
- 程式碼少很多
- 已為您載入所有必要的圖表程式庫
- 建立
Query物件並為您處理回呼，讓查詢資料來源更加輕鬆 - 傳入容器元素 ID，即可為您呼叫 getElementByID。
- 資料可透過多種格式提交，包括值陣列、JSON 常值字串，或是
DataTable處理常式
缺點：
ChartWrapper目前只會傳播選取、就緒和錯誤的事件。如要取得其他事件，您必須取得包裝圖表的控制代碼，並訂閱該圖表的事件。如需示例，請參閱ChartWrapper說明文件。
例如：
以下柱狀圖範例包含本機建構的資料，指定為陣列。您無法使用陣列語法指定圖表標籤或日期時間值，但可以使用這些值手動建立 DataTable 物件，然後將該物件傳遞至 dataTable 屬性。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
['', 700, 300, 400, 500, 600, 800]],
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw();
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
以下是透過查詢 Google 試算表取得資料的折線圖範例。請注意，程式碼不需處理回呼。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current');
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
query: 'SELECT A,D WHERE D > 100 ORDER BY D',
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw()
// No query callback handler needed!
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
結合自動載入功能，可讓程式碼變得非常精簡：
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
query: 'SELECT A,D WHERE D > 100 ORDER BY D',
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw()
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
搭配 ChartWrapper 使用圖表編輯器
您可以使用 Google 試算表內建的「圖表編輯器」對話方塊設計圖表，然後要求序列化的 ChartWrapper 字串代表圖表。接著，您可以複製及貼上這個字串，然後按照 ChartWrapper 中的說明使用。
您可以在自己的網頁中嵌入圖表編輯器，並向使用者顯示連結其他資料來源及傳回 ChartWrapper 字串的方法。詳情請參閱 ChartEditor 參考說明文件。
DrawChart()
DrawChart 是包裝 ChartWrapper 的全域靜態方法。
優點：
- 與
ChartWrapper相同，但可使用的時間較短。
缺點：
- 不會向包裝函式傳回控制代碼，因此無法處理任何事件。
<DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
google.visualization.drawChart({
"containerId": "visualization_div",
"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
"query":"SELECT A,D WHERE D > 100 ORDER BY D",
"refreshInterval": 5,
"chartType": "Table",
"options": {
"alternatingRowStyle": true,
"showRowNumber" : true
}
});
}
google.charts.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization_div" style="width: 600px; height: 400px;"></div>
</body>
</html>