google-visualization 加载和运行

示例

Google目前有两种加载Google Visualization（又称Google Charts）的JS库的方式，即gstatic loader（https://www.gstatic.com/charts/loader.js）和jsapi（https://www.google.com/jsapi）。

推荐使用gstatic加载程序，因为Google正在从jsapi过渡到gstatic loader。请参阅过渡参考

无论哪种情况，您都必须首先在其中包含一个带有script标记的加载器，通常在head文档的中，如下所示：

<script type="text/javascript" xx_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" xx_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