我有一些javascript代码,其中加载了多个javascript文件和库。
- Chartjs
- chartjs-plugin-datalabels
- chartjs-plugin-datatables
在大多数情况下,加载这些文件没有问题。
但有时我会得到一个'Uncaught TypeError:无法读取未定义的属性“helpers”
我认为有时Chart.js没有完全加载。那么,我如何确保Chart.js已经加载,然后加载我的依赖脚本?
错误由chartjs-plugin-datalabels抛出:
chartjs-plugin-datalabels.js?_=1570176417056:15 Uncaught TypeError: Cannot read property 'helpers' of undefined
at chartjs-plugin-datalabels.js?_=1570176417056:15
at chartjs-plugin-datalabels.js?_=1570176417056:10
at chartjs-plugin-datalabels.js?_=1570176417056:11
这就是我如何加载所有的JavaScript文件:
Promise.all([loadChartJS(), loadOtherScripts(), loadCss()])
.then(() => {
//do something with loaded files.
});
function loadChartJS() {
return new Promise((resolve, reject) => {
dependentScripts = [
libs/chartjs.min.js,
libs/someLib.js,
libs/anotherLib.js,
];
for (var i in dependentScripts) {
$.getScript(dependentScripts[i]).done(function(script, textStatus) {
resolve();
})
}
});
}
function loadScripts() {
return new Promise((resolve, reject) => {
listOfScripts = [
libs/datatables.min.js,
libs/chartjs-plugin-datalabels.js,
... some other files
];
var stage = 0;
for (let e in listOfScripts) {
$.getScript(listOfScripts[e])
.done(function(script, textStatus) {
stage++;
if (stage == listOfScripts.length) {
resolve();
}
})
.fail(function(jqxhr, settings, exception) {
reject(jqxhr);
});
}
});
}
3条答案
按热度按时间shyt4zoc1#
在这两种情况下,似乎都是在
dependentScripts
和listOfScripts
中的第一个元素被加载时解析单个Promises,而不是在所有元素都被加载时解析。也就是说,在解析Promise之前,你不需要等待所有的dependentScripts
和listOfScripts
。olqngx592#
我想我已经找到了一个在我的情况下加载依赖脚本的解决方案。因此,插件DataLabels仅在chartjs解析时加载。
agxfikkp3#
我们有两个文件1。
chart.js
和2.datalabels.plugins
这两个文件足以创建不同类型的图表和datalabels
插件负责标签的数据,以便先附加你的文件"chartjs"
和datalabels
插件后。因此,首先加载chartjs
,然后加载任何插件。