此頁面列出了幾種可用於在網頁上繪製與繪製圖表的方法。每種方法都有優點和缺點。
目錄
圖表.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 是納入 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>