Question

我在3个不同的div标签中有3个不同的图表，它们在指定时出现并隐藏。然而，两张图表随机调整大小，我知道原因。我该如何解决？我有wordpress并使用visualizer插件为我的图表。拥有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

快速解决方法是在visualizer.render();功能结束时添加致电toggleVisibility：

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

问题是由于当时不可见的div的可用区域计算无效所致。调用此方法会强制重新计算svgs并确保正确的大小。

Div内容调整大小

1 个答案: