You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

动态加载多Highcharts库首次加载报错,图表异常求助

动态加载Highcharts JS库时首次加载报错,图表无法正常显示

问题概述

项目需动态加载JS库,但首次加载时出现报错,部分图表无法正常显示,不清楚报错原因及如何修正加载逻辑。

错误截图

报错截图

已确认库加载成功

库加载成功截图

当前加载库的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库列表:
["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 );

需求目标

实现结合图表配置动态加载库,按需绘制任意图表,解决首次加载报错问题。

内容的提问来源于stack exchange,提问作者Rodo

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.16 11:45:09