Dojo前端集成Highcharts报未定义错误及版本适配问题咨询

报错原因说明 #

测试代码抛出的Uncaught ReferenceError: Highcharts is not defined问题由两个原因共同导致：

• 给Dojo配置了async: true异步加载模式后，外部脚本加载顺序不受标签书写顺序严格约束，写在Highcharts标签之后的内联脚本可能先于Highcharts执行
• 原生DOMContentLoaded事件仅保证DOM树解析完成，不保证外部引入的JS资源完成加载挂载，回调触发时Highcharts可能还未初始化到全局作用域

另外提到的2014年发布的highcharts.com-dojo-adapter插件完全没有使用必要：该插件发布时Highcharts尚未支持原生AMD规范，目前所有稳定版Highcharts都原生适配Dojo这类AMD加载器，该插件长期未维护，引入反而会引发循环依赖、全局变量污染等兼容问题。

基础Dojo项目集成方案 #

方案1：快速适配（适合简单页面） #

调整脚本加载顺序，替换原生DOM加载监听为Dojo自带的domReady钩子，确保所有资源加载完成后再执行图表初始化，修正后可直接运行的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 先加载Highcharts，再加载Dojo，规避异步加载时序问题 -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: true"></script>
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <div id="container" style="width:100%; height:400px;"></div>
    <script>
        require([
            'dojo/dom',
            'dojo/dom-construct',
            'dojo/domReady!' // 阻塞执行直到DOM和所有前置脚本加载完成
        ], function (dom, domConstruct) {
            var greetingNode = dom.byId('greeting');
            domConstruct.place('<em> Dojo!</em>', greetingNode);
            
            // 初始化Highcharts图表
            Highcharts.chart('container', {
                chart: { type: 'bar' },
                title: { text: 'Fruit Consumption' },
                xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] },
                yAxis: { title: { text: 'Fruit eaten' } },
                series: [
                    { name: 'Jane', data: [1, 0, 4] },
                    { name: 'John', data: [5, 7, 3] }
                ]
            });
        });
    </script>
</body>
</html>

方案2：AMD模块化加载（符合Dojo开发规范，适合大型项目） #

通过Dojo配置将Highcharts注册为标准AMD模块，不需要依赖全局变量，更适合工程化项目：

1. 首先在加载dojo.js之前配置模块路径映射：

<script>
    var dojoConfig = {
        async: true,
        packages: [
            {
                name: 'highcharts',
                location: 'https://code.highcharts.com',
                main: 'highcharts'
            }
        ]
    };
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

2. 业务代码中直接作为依赖引入使用：

require([
    'dojo/dom',
    'dojo/domReady!',
    'highcharts'
], function (dom, domReady, Highcharts) {
    // 此处Highcharts为模块导出对象，不存在未定义问题
    Highcharts.chart('container', {
        // 图表配置项
    });
});

如果需要使用Highcharts扩展功能（导出、3D图表、热力图等），只需要在引入highcharts主模块之后，按需引入对应扩展模块路径即可，扩展能力会自动挂载到Highcharts实例上。

ESRI Web App Builder 落地说明 #

Dojo版本一致性核查方法 #

• 方法1：打开运行中的WAB应用，按F12调出开发者控制台，输入dojo.version回车，即可输出当前WAB内置的Dojo完整版本号，直接和本地测试版本对比即可。目前主流WAB 2.x系列内置Dojo版本在1.10.x-1.16.x区间，和Highcharts全兼容。
• 方法2：查看WAB项目源码中dojo/dojo.js或根目录init.js的文件头部注释，会标注明确的Dojo版本信息。

WAB集成注意事项 #

• 不建议从公网CDN加载Highcharts，将Highcharts源码放到WAB项目的libs自定义目录下，调整Dojo packages配置中的location为本地相对路径即可。
• 图表初始化逻辑不要写在全局作用域，放到自定义Widget的startup生命周期函数中执行，确保Widget对应的DOM容器已经完成渲染再初始化Highcharts，避免找不到容器报错。
• 如果WAB开启了模块压缩打包，只需要在打包配置中把highcharts模块加入依赖列表即可，不需要额外做适配。

内容的提问来源于stack exchange，提问作者dijon