我有一个单页应用程序,但有不同的选项卡。只对于一个选项卡,我想显示一个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
}
的实现
<style>
.preloader {
height:350px; background:url(images/719.gif) left no-repeat;
}
</style>
<div id="columnchart_material"><div class="preloader"> </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>
代码笔 点击这里
试试 Angular Google Chart。它抽象了指令背后的图表管理,因此您只需向它传递一个包含数据、选项和图表类型的对象,其余的由它完成。 它不会添加脚本标记,直到它第一次加载指令,或者您请求库加载时返回的承诺。 如果你真的想抑制库加载,你需要确保指令元素在你实际需要它之前不会在后台加载。因此,请使用 ng-if 而不是 ng-show 或将其放在不同的路由视图中。
由于到目前为止网上似乎没有可行的解决方案,我希望这将在未来对某人有所帮助。关键概念是延迟js
文件加载和图表组件初始化,并带有callback
。
加载 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
});
}
}
}
带回调的异步函数:
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