折叠面板中的 Dygraphs 无法正确渲染答案

【问题标题】：Dygraphs in collapsed panel not rendering correctly折叠面板中的 Dygraphs 无法正确渲染
【发布时间】：2021-02-14 18:13:44
【问题描述】：

我想在折叠的引导面板中呈现 dygraphs 图。一旦用户显示面板，图表应该是可见的。

我的问题是，当最初折叠的面板出现时，其中的 dygraphs 图表未正确显示。请参阅此jsfiddle。我的 html 正文看起来像这样（使用 bootstrap 3）：

<div class="container">
  <div class="row">
    <div class="col-sm-3">
    <label><input type="checkbox" onclick="checkboxChanged(this)"/> Show panel 2</label>
    </div>
    <div class="col-sm-9">
      <div class="panel panel-default">
        <div id="panel1" class="panel-body">
          <div id="graphdiv1"></div>
        </div>
        <div id="panel2" class="panel-body collapse">
          <div id="graphdiv2"></div>
        </div>
      </div>
    </div>
  </div>
</div>

我的 javascript 看起来像这样：

function checkboxChanged(checkbox){
  if(checkbox.checked){
    document.getElementById('panel1').classList.add("collapse");
    document.getElementById('panel2').classList.remove("collapse");
  } else {
    document.getElementById('panel1').classList.remove("collapse");
    document.getElementById('panel2').classList.add("collapse");
  }
}

g1 = new Dygraph(
  document.getElementById("graphdiv1"),
  "Date,Temperature\n" +
  "2008-05-07,75\n" +
  "2008-05-08,70\n" +
  "2008-05-09,80\n",
  { title: 'Graph on panel 1' }
);

g2 = new Dygraph(
  document.getElementById("graphdiv2"),
  "Date,Temperature\n" +
  "2008-05-07,20\n" +
  "2008-05-08,37\n" +
  "2008-05-09,17\n",
  { title: 'Graph on panel 2' }
);

我得到了什么：

我的期望：

注意：奇怪的是，当我调整 jsfiddle 的输出区域大小时，图形会正确呈现。然后，当我取消选中“显示面板 2”复选框时，第一个面板图呈现不正确。

我尝试在复选框方法的末尾更新 dygraphs，如下所示：

  g1.updateOptions({});
  g2.updateOptions({});

但这似乎没有任何效果。

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： javascript twitter-bootstrap dygraphs

【解决方案1】：

我发现一个似乎有效的破解方法。任何关于更清洁解决方案的建议将不胜感激！

我的解决方案是使用visibility:hidden;（而不是display:none;）在文档的最后放置一个包含graphdiv2 的隐藏div，然后在选中复选框时，让两个图形div换个地方。

所以 html 正文现在看起来像这样：

<div class="container">
  <div class="row">
    <div class="col-sm-3">
    <label><input type="checkbox" onclick="checkboxChanged(this)"/> Show panel 2</label>
    </div>
    <div class="col-sm-9">
      <div class="panel panel-default">
        <div id="my_panel" class="panel-body">
          <div id="graphdiv1"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="hidden_zone" style="visibility:hidden;">
  <div id="graphdiv2"></div>
</div>

checkbox onclick 函数现在看起来像这样：

  function checkboxChanged(checkbox){
    graph1_div = document.getElementById("graphdiv1");
    graph2_div = document.getElementById("graphdiv2");
    show_parent = document.getElementById('my_panel');
    hidden_zone = document.getElementById('hidden_zone');
    if(checkbox.checked){
        hidden_zone.appendChild(graph1_div);
        show_parent.appendChild(graph2_div);
    } else {
        hidden_zone.appendChild(graph2_div);
        show_parent.appendChild(graph1_div);
    }
 }

这是此解决方案的 jsfiddel。

对更清洁的解决方案有什么建议吗？

【讨论】：