javascript 获取“未捕获的类型错误:无法读取未定义的属性“helpers”

vshtjzan  于 2023-05-21  发布在  Java
关注(0)|答案(3)|浏览(83)

我有一些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);
                });
        }
    });
}
shyt4zoc

shyt4zoc1#

在这两种情况下,似乎都是在dependentScriptslistOfScripts中的第一个元素被加载时解析单个Promises,而不是在所有元素都被加载时解析。也就是说,在解析Promise之前,你不需要等待所有的dependentScriptslistOfScripts

olqngx59

olqngx592#

我想我已经找到了一个在我的情况下加载依赖脚本的解决方案。因此,插件DataLabels仅在chartjs解析时加载。

$.when(
    $.getScript(`libs/chartjs.min.js`),
    $.Deferred(function(deferred) {
        $(deferred.resolve);
    })
).done(function() {
    $.getScript(`libs/chartjs-plugin-datalabels.js`)
    //Load other scripts
    Promise.all([loadScripts(), loadCss()])
        .then(() => {

            //do stuff ...

        });
});
agxfikkp

agxfikkp3#

我们有两个文件1。chart.js和2. datalabels.plugins这两个文件足以创建不同类型的图表和datalabels插件负责标签的数据,以便先附加你的文件"chartjs"datalabels插件后。因此,首先加载chartjs,然后加载任何插件。

相关问题