如何懒惰加载谷歌jsapi图表与angularjs？

Question

我有一个单页应用程序，但有不同的选项卡。 只有一个标签我想显示google charts 。 我不想直接包含和加载图表js文件jsapi ，但仅限于访问特定选项卡。

因此我必须动态添加以下js：

var script = document.createElement('script');
script.src = '//http://www.google.com/jsapi?ext.js';
document.body.appendChild(script);

问题：如何检测js何时完全加载，以便我可以继续如下？

if (whenJspaiLoaded()) {
    google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart); //my custom function
}

Answer 1

这是我的实施

    <style>
    .preloader {
        height:350px; background:url(images/719.gif) left no-repeat;
    }
    </style>
    <div id="columnchart_material"><div class="preloader">&nbsp;</div></div>
<script type="text/javascript"
          src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }">
</script>
    <script>
google.setOnLoadCallback(drawChart);

      function drawChart() {
    var chart = new google.visualization.LineChart(document.getElementById('columnchart_material'));
                options.title='English'
                options.series[1].lineWidth = 0;
            chart.draw(data,options );
}
    </script>

Codepen 点击这里

Answer 2

试试Angular Google Chart 。 它抽象了一个指令后面的图表管理，所以你只需要传递一个包含数据，选项和图表类型的对象，然后完成剩下的工作。 它在第一次加载指令之前不会添加脚本标记，或者您要求在库加载时返回的promise。 如果你真的想要抑制库加载，你需要确保指令元素没有在后台加载，直到你真正需要它为止。 因此，使用ng-if而不是ng-show或将其放在不同的路由视图中。

Answer 3

由于到目前为止网上似乎没有可行的解决方案，我希望这将有助于将来的某些人。 关键概念是通过callback延迟js文件加载和图表组件初始化。

加载js文件的服务：

app.service('gchart', ['$window', '$q', '$rootScope', function ($window, $q, $rootScope) {
      var deferred = $q.defer();

      //run when the jsapi is loaded
      $window.callback = function () {
            $window.google.load('visualization','1',{
                packages: ['corechart'],
                callback: function() {
                    //again having a callback to wait for the visualization to load
                    $rootScope.$apply(function() {
                        deferred.resolve();
                    });
                }
            });
      }

      // dynamically adding the js file on page access
      var script = document.createElement('script');
      script.src = '//www.google.com/jsapi?callback=callback';
      document.body.appendChild(script);

      return deferred.promise;
}]);

用作指令：

app.directive(.., ['gchart', function(.., gchart) {
   return {
      //...
      link: function(scope, elm, attr) {
          scope.init = function() {
              var viz = new google.visualization.arrayToDataTable(data);
              //add options, linechart, draw, whatever
          };

          // delay the creation until jsapi files loaded
          loadGoogleChartAPI.then(function () {
              scope.init();
          }, function () {
              //ignore
          });           
       }
   }
}

Answer 4

带回调的异步函数：

function async(u, c) {
  var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  o.src = '//' + u;
  if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
  s.parentNode.insertBefore(o, s);
}

用法：

async('www.google.com/jsapi?ext.js', function() {
    google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);
});

来自： https ： //stackoverflow.com/a/12821561/3279156