本页面列出了在页面上实例化和绘制图表的不同方法。每种方法都有其优缺点，如下所示。
目录
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目前仅传播 select、ready 和 error 事件。要获取其他事件，您必须获取封装图表的句柄，并在其中订阅事件。如需查看示例，请参阅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>