绘制图表

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

 

 

 

更多信息