載入和執行

谷歌目前有兩種載入谷歌視覺化（即 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