<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>
)才能存储您的图表。
您必须向图表传递对此元素的引用,因此为其分配一个可用于通过 document.getElementById()
检索引用的 ID。绘制此元素时,其中的所有内容都将被替换为图表。考虑是否应明确调整此 <div>
元素的大小,但现在,请在 <div>
HTML 中指定图表大小。
每个图表都支持采用两个值的 draw()
方法:保存数据的 DataTable
(或 DataView
)对象以及可选的图表选项对象。选项对象不是必需的,您可以忽略它或传入 null 以使用图表的默认选项。
调用 draw()
后,您的图表将在页面上绘制。每当您更改数据或选项并希望更新图表时,都应调用 draw()
方法。
draw()
方法是异步的:也就是说,它会立即返回,但返回的实例可能不会立即可用。在很多情况下,这样做没有问题;图表最终将绘制。不过,如果要在调用 draw()
后在图表上设置或检索值,则必须等待它抛出就绪事件,这表示该事件已填充。我们将在下一页介绍如何监听事件。
问题排查
如果您的图表无法绘制在网页上,下面介绍了一些可能有助于解决问题的方法:
- 查找拼写错误。请注意,JavaScript 语言区分大小写。
- 使用JavaScript调试程序。在 Firefox 中,您可以使用 JavaScript 控制台、Venkman 调试程序或 Firebug 插件。在 Chrome 中,您可以使用开发者工具 (Shift + Ctl + J)。
- 搜索 Google 可视化图表 API 论坛。如果您找不到能解答您的问题的帖子,请在论坛中发布您的问题以及一个可演示该问题的网页链接。