如何动态加载库(多个)?

问题描述 投票:0回答:1

目前,由于我的项目的需要,我正在动态加载库,第一次加载它们时出现错误,并且并非所有图形都可以工作。

我不知道如何纠正负载,使其正常工作,也不知道失败的原因。

这是错误的图像:

enter image description here

据我了解,库已正确加载:

enter image description here

我用来加载库的js代码是

for ( var i = 0; i < librerias.length; i++ ) {
    var rutaLibreria = librerias[ i ];
    //console.log( "Ruta de la librería:", rutaLibreria );

    var fechaActual = new Date();
    let timestamp = fechaActual.getTime();

    let fechaFormateada = new Date( timestamp ).toISOString().replace( /[^0-9]/g, '' );

    if (loadedCount === librerias.length) { 
        if ( !isScriptLoaded( rutaLibreria ) ) {
            console.log("Carganddo la ULTIMA libreria...");
            script = document.createElement( 'script' );
            script.type = 'text/javascript';
            script.src = `${rutaLibreria}?${fechaFormateada}`;
            script.onload = function () {
                Highcharts.chart( container, config );
            };
            document.head.appendChild( script );
        }
    }else{
        loadedCount++;
        console.log("Carganddo SOLO la libreria...");
        if ( !isScriptLoaded( rutaLibreria ) ) {
            script = document.createElement( 'script' );
            script.type = 'text/javascript';
            script.src = `${rutaLibreria}?${fechaFormateada}`;
            document.head.appendChild( script );
        }

    } 
}

如果有人可以帮助我,我将不胜感激。

我想做的是加载动态库和图形配置,这样我就可以根据需要绘制任何图形。

添加细节


确实,我认为这是不可能复制的。我会尽力留下更多细节。 我留下的js代码是在标头中加载js库(librerias)的代码。图书馆是这样到达的:

["https://code.highcharts.com/highcharts.js","https://code.highcharts.com/modules/series-label.js","https://code.highcharts.com/modules/exporting.js","https://code.highcharts.com/modules/export-data.js","https://code.highcharts.com/modules/accessibility.js"]

图表配置(config)如下:

{"chart":{"type":"line"},"title":{"text":"Solar Employment Growth by Sector, 2010-2016"},"subtitle":{"text":"Source= thesolarfoundation.com"},"yAxis":{"title":{"text":"Number of Employees"}},"xAxis":{"accessibility":{"rangeDescription":"Range= 2010 to 2017"}},"legend":{"layout":"vertical","align":"right","verticalAlign":"middle"},"plotOptions":{"series":{"label":{"connectorAllowed":false},"pointStart":2010}},"series":[{"name":"Installation","data":[43934,52503,57177,69658,97031,119931,137133,154175]},{"name":"Manufacturing","data":[24916,24064,29742,29851,32490,30282,38121,40434]},{"name":"Sales & Distribution","data":[11744,17722,16005,19771,20185,24377,32147,39387]},{"name":"Project Development","data":[0,0,7988,12169,15112,22452,34400,34227]},{"name":"Other","data":[12908,5948,8105,11248,8989,11816,18274,18111]}],"responsive":{"rules":[{"condition":{"maxWidth":500},"chartOptions":{"legend":{"layout":"horizontal","align":"center","verticalAlign":"bottom"}}}]}}

当我像这样运行图表时:

Highcharts.chart(container, config );
highcharts
1个回答
0
投票

我使用以下代码一切正常。这些库有一个 json 格式的依赖项列表。

    function loadScripts( url ) {
    return new Promise( ( resolve, reject ) => {
        const script = document.createElement( 'script' );
        script.src = url;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild( script );
    } );

}

async function loadHighcharts( lib ) {
    try {
        for ( const url of lib ) {
            if ( !isScriptLoaded( url ) ) {
                await loadScripts( url );
            }
        }
        Cargar( $CONFIG );
    } catch ( error ) {
        console.error( "Error al cargar las librerías de Highcharts:", error 
);
    }
}

function isScriptLoaded( url ) {
    var headContent = document.head.innerHTML;
    return headContent.includes( url );
}

window.onload = loadHighcharts( librerias );
© www.soinside.com 2019 - 2024. All rights reserved.