绘制图表

<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 论坛。如果您找不到可以解答您问题的帖子,请将您的问题发布到群组,并附上演示问题的网页的链接。

 

 

 

更多信息