选项卡中的 Dojo 图表在 Firefox 中不起作用

Question

我在两个选项卡中使用两个相同的脚本，以便在每个选项卡中创建一个 dojo 图表：tabs page。

如果您使用 Google Chrome 打开页面，Safari 两个选项卡都会呈现图表。

如果您使用 Firefox 打开它，第二个选项卡不会呈现它的图表。如果您使用 Explorer 11 打开它，第二个选项卡会以随机大小呈现它的图表。

有人能告诉我为什么在第二个选项卡中出现此错误吗？

我所有的浏览器都更新到最新版本。

脚本使用最新版本的dojo，jquery:

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js"></script>

  <script>
    require([
             "dojox/charting/Chart",
             "dojox/charting/Chart2D", 
             "dojox/charting/action2d/MoveSlice" , 
             "dojox/charting/action2d/Tooltip",
             "dojo/ready"], 
            function(Chart, Chart2D, MoveSlice, Tooltip, ready){

ready(function(){

var chart1 = new Chart("He1");

                chart1.addPlot("default", {
                    type: "Pie"
                });
                chart1.addSeries("He1", [
                    {y: 1, text: 1},
                    {y: 1, text: 2}

                ]);
                new Tooltip(chart1, "default");
                new MoveSlice(chart1, "default");

chart1.render();

});

    });

    </script>

</head>
<body class="calcite">
<div>
    <div id="He1" style="width: 140px; height: 140px; "></div>
</div>

</body>
</html>

Answer 1

要使手风琴中的多个图表创建适当的布局，然后初始化图表和包装它们的手风琴容器。

例如，您可以将布局修改为

<body class="calcite">
  <div id="accordion" style="height: 280px">
    <div id="pane1">
      <div id="He1" style="width: 140px; height: 140px; "></div>
    </div>
    <div id="pane2">
      <div id="He2" style="width: 140px; height: 140px; "></div>
    </div>
  </div>
</body>

然后像以前一样创建 He1 和 He2 图表，最后像这样初始化 accordion 和面板：

var acc = new AccordionContainer({}, "accordion");
acc.addChild(new ContentPane({
  title: "Chart one",
}, "pane1"));
acc.addChild(new ContentPane({
  title: "Chart two",
}, "pane2"));
acc.startup();

在此处查看工作示例：https://jsfiddle.net/1k6w8otn/4

请注意，它不需要任何 iframe。我强烈提倡纯编程，使用任何构建器（如您在评论中提到的）通常会导致意大利面条代码，而且很多时候您无法修复它。 Dojo 工具包也远非最佳选择，它现在是利基库（没有最新的书籍，几乎没有背后的社区等），如果你不是被迫使用它，做一些研究并寻找更好的 JS 库。

选项卡中的 Dojo 图表在 Firefox 中不起作用

Dojo charts in tabs not working in Firefox

dojo

dojox.charting