Div 内容调整大小

Question

我在 3 个不同的 div 标签中有 3 个不同的图表，这些标签在指定时显示和隐藏。然而，其中两个图表随机调整大小，我知道为什么。我该如何解决？我有 wordpress 并为我的图表使用可视化工具插件。在 header.php 文件和页面特定代码的文本部分中包含代码。

代码如下：

Header.php 片段 -

<script>
    var divs = ["Daily", "Weekly", "Monthly"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }
</script>


HTML page snippet - 

<div class="inner_div"> 
<div id="Daily">[visualizer id="431"]</div>
<div id="Weekly" style="display: none;">[visualizer id="430"]</div>
<div id="Monthly" style="display: none;">[visualizer id="429"]</div>
</div>
<div class="main_div">
<div class="buttons">
<a href="#" onclick="toggleVisibility('Daily');">Daily</a> | <a href="#" onclick="toggleVisibility('Weekly');">Weekly</a> | <a href="#" onclick="toggleVisibility('Monthly');">Monthly</a>
</div>

Answer 1

一个快速解决方法是在 toggleVisibility 函数的末尾包含调用 visualizer.render();：

function toggleVisibility(divId) {
  if(visibleDivId === divId) {
    visibleDivId = null;
  } else {
    visibleDivId = divId;
  }
  hideNonVisibleDivs();
  visualizer.render();
}

问题是由于当时不可见的 div 的可用区域计算无效造成的。调用此方法会强制 re-calulcation svgs 并确保正确的大小。

Div 内容调整大小

Div content resizing

html

wordpress

charts

resize

visualizer