Question

我想加载谷歌图表库并仅使用一个脚本标记。这是我的代码示例。当我使用单独的脚本加载google API时一切正常。但是我想只使用一个脚本可能。

<html>
  <head>
    <title>one script tag test</title>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
    <script type="text/javascript">
      // Here I'm creating a script object and
      // load jsapi
      var scr = document.createElement("script");
      scr.setAttribute("src","https://www.google.com/jsapi");
      document.head.appendChild(scr);

      // here i wait until 
      // google object appears. 
      (function waitForGoogleLoad() {
            if(typeof google == 'undefined') {
                setTimeout(waitForGoogleLoad, 0);
            } else {
                processChart();
            }
      })();

      function processChart() {
          // Load the Visualization API and the piechart package.
          google.load('visualization', '1.0', {'packages':['corechart']});

          // Set a callback to run when the Google Visualization API is loaded.
          google.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>
  </body>
</html>

我会非常感谢任何想法和建议。最好的祝福。

Answer 1

处理此问题的最简单方法是在脚本标记中使用自动加载器语法。这样可以避免在等待脚本加载并从另一个函数内部调用google加载器时出现任何问题：

var scr = document.createElement("script");
scr.setAttribute("src",'https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart"],"callback":"drawChart"}]}');
document.head.appendChild(scr);
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);
}

请参阅此处的工作示例：http://jsfiddle.net/asgallant/G9PKE/

仅使用一个脚本标记加载Google图表库，

1 个答案: