加载和运行

谷歌目前有两种加载谷歌可视化（即 Google 图表）， gstatic 加载器 （https://www.gstatic.com/charts/loader.js）和 jsapi （https://www.google.com/jsapi） 的 JS 库的方法。

建议使用 gstatic 加载器，因为 Google 正在从 jsapi 过渡到 gstatic 加载器。请参阅转换参考

在任何一种情况下，你必须首先包含一个带有 script 标记的加载器，通常位于文档的 head 中，如下所示：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

将加载程序包含在网页中后，可以通过调用 load 函数将其用于加载所需的库包。

对于 Loader.js

google.charts.load('current', {packages: ['corechart']});

对于 JSAPI

google.load('visualization', '1', {'packages':['corechart']});

但是在加载库包之后，必须等待它们完成加载才能继续使用它们。等待的方法是通过调用 setOnLoadCallback 函数来设置回调。

示例代码（用于 gstatic 加载器）：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
 google.charts.load('current', {packages: ['corechart']});
 google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Group');
        data.addColumn('number', 'Gender');
        data.addRows([
          ['Males', 10],
          ['Females', 5]
        ]);

        var options = {
            'title':'Gender distribution',
            'width':300,
            'height':300};
        var chart = new google.visualization.PieChart(
            document.getElementById('gender_chart'));
        chart.draw(data, options);
      }
    </script>

HTML：

<div id="gender_chart"></div>

的 jsfiddle