<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
类,以此类推。饼图和条形图都包含在您在本教程开头部分加载的 corechart 软件包中。不过,如果您想在网页上使用树状图或地理图表,就必须另外加载“treemap”或“geomap”软件包。
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()
后设置或检索图表上的值,则必须等待其抛出 ready 事件,表示已填充该图表。我们将在下一页中介绍如何监听事件。
问题排查
如果您的图表没有在页面上绘制,以下一些方法可能可以帮助您解决问题:
- 查找拼写错误。请注意,JavaScript 语言区分大小写。
- 使用JavaScript调试程序。在 Firefox 中,您可以使用 JavaScript 控制台、 Vekman 调试程序或 Firebug 插件。在 Chrome 中,您可以使用开发者工具 (Shift + Ctl + J)。
- 搜索 Google Visualization API 论坛。如果您找不到可以解答您问题的帖子,请将您的问题发布到群组,并附上演示问题的网页的链接。