绘制图表

<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 论坛。如果您找不到能解答您的问题的帖子，请在论坛中发布您的问题以及一个可演示该问题的网页链接。

 

 

 

详细信息