Dojo图表在Firefox、IE11中不显示问题求助

让我来帮你解决这个跨浏览器的图表显示问题，看了你的代码后，发现几个关键原因导致Firefox和IE11无法正常渲染饼图：

问题原因 #

• 过时的jQuery版本冲突：你引入的jQuery 1.3是2009年的老旧版本，和Dojo 1.12.1在DOM操作、事件绑定逻辑上存在兼容性冲突。Chrome对这类旧库的兼容处理更宽松，但Firefox和IE11对这类冲突的容忍度极低，会直接阻断图表渲染。
• 重复的Chart模块引用：dojox/charting/Chart和dojox/charting/Chart2D是同一模块的别名（在Dojo 1.12中，Chart2D就是Chart的另一个导出），重复引用会导致初始化逻辑混乱，影响图表渲染。
• 缺少图表主题模块：Dojo图表依赖主题模块来渲染基础样式，没有加载主题时，Firefox和IE11无法正确绘制图表的视觉元素，而Chrome可能会自动 fallback 到默认样式。
• IE11的兼容性细节：虽然Dojo 1.12支持IE11，但旧jQuery的存在可能干扰了DOM就绪事件的触发，导致图表初始化时机错误。

修复方案与修正代码 #

针对以上问题，我调整了你的代码，具体修改如下：

1. 移除了过时的jQuery 1.3引用（如果你的项目不需要jQuery，完全可以删掉；如果必须用jQuery，请升级到3.x版本）
2. 删除了多余的Chart2D引用，只保留Chart
3. 添加了dojox/charting/themes/Claro主题模块，并将主题应用到图表
4. 优化了初始化逻辑，确保DOM完全就绪后再创建图表

修正后的代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css">
<!-- 移除了老旧的jQuery 1.3引用 -->
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>
<script>
require([
    "dojox/charting/Chart",
    "dojox/charting/action2d/MoveSlice",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/themes/Claro", // 添加主题模块
    "dojo/ready"
], function(Chart, MoveSlice, Tooltip, ClaroTheme, ready){
    ready(function(){
        var chart1 = new Chart("He");
        chart1.setTheme(ClaroTheme); // 应用主题
        chart1.addPlot("default", {
            type: "Pie",
            labelOffset: 25,
            font: "9pt Arial"
        });
        chart1.addSeries("He", [
            {y: 1, text: 1},
            {y: 1, text: 2},
            {y: 1, text: 3}
        ]);
        new Tooltip(chart1, "default");
        new MoveSlice(chart1, "default");
        chart1.render();
    });
});
</script>
</head>
<body class="calcite">
<div>
<div id="He" style="width: 140px; height: 140px; "></div>
</div>
</body>
</html>

额外提示 #

• 如果你的项目确实需要jQuery，建议升级到jQuery 3.6+，这个版本和Dojo 1.12的兼容性更好，同时也支持IE11（需要注意jQuery 3.x对IE的支持细节）。
• 对于IE11，确保你的页面没有使用ES6+语法（Dojo 1.12已经做了兼容，但避免自己写不兼容的代码）。
• 可以打开浏览器的开发者工具（F12）查看控制台错误，这是排查跨浏览器问题的重要手段——比如之前的代码在Firefox控制台应该会输出冲突相关的错误信息。

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