可视化数据网页开发Google Charts（四）:绘画图表
倪振海
<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>初始化图表
每个图表类型都基于图表文档中列出的不同类。例如，饼图基于google.visualization.PieChart 类，条形图是基于google.visualization.BarChart类，等等。饼图和条形图都包含在您在本教程开始时加载的corechart包中。但是，如果您想在页面上显示树形地图或地理图，则必须额外加载 additionally load the 'treemap' or 'geomap' packages.。
谷歌图表构造函数只接受一个参数:用于绘制可视化的DOM元素的引用。
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));绘画图表
chart.draw(data, options);
在准备好数据和选项之后，就可以开始绘制图表了。
页面必须有一个HTML元素(通常是<div>)来保存图表。您必须将图表的引用传递给这个元素，因此为它分配一个ID，您可以使用document.getElementById()来检索引用。该元素中的任何内容在绘制时都将被图表所替代。考虑是否应该显式调整这个<div>元素的大小，但是现在，在<div> HTML中指定图表的大小。
每个图表都支持一个draw()方法，该方法接受两个值:一个DataTable(或DataView)对象和一个可选的chart options对象。options对象不是必需的，您可以忽略它，或者传递null来使用图表的默认选项。
调用draw()后，您的图表将被绘制在页面上。每次更改数据或选项并希望更新图表时，都应该调用draw()方法。
draw()方法是异步的:也就是说，它立即返回，但是它返回的实例可能不是立即可用的。在很多情况下，这是可以的;图表最终会被绘制出来。但是，如果您想在调用draw()之后设置或检索图表上的值，则必须等待它抛出ready事件，这表明它已填充。我们将在下一页讨论监听事件。
类似资料：