Блог

Я хотел бы отобразить график графиков в свернутой панели начальной загрузки. Как только пользователь показывает панель, график должен быть виден.

Моя проблема в том, что при появлении первоначально свернутой панели график 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,Temperaturen"  
  "2008-05-07,75n"  
  "2008-05-08,70n"  
  "2008-05-09,80n",
  { title: 'Graph on panel 1' }
);

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

Что я получаю:

Чего я ожидаю:

Примечание: Любопытно, что, когда я изменяю размер области вывода jsfiddle, график отображается правильно. Когда я затем снимаю флажок «показывать панель 2», график первой панели отображается неправильно.

Я попытался обновить графики в конце метода checkbox следующим образом:

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

но это, похоже, не имеет никакого эффекта.

Любая помощь будет с благодарностью. Спасибо!

Я нашел хак, который, похоже, работает. Любые предложения по более чистому решению будут высоко оценены!

Мое решение состоит в том, чтобы поместить скрытый div, содержащий graphdiv2 , в самом конце документа, используя visibility:hidden; (вместо display:none; ), а затем, когда флажок установлен, чтобы два графических раздела поменялись местами.

Итак, тело 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>
  

И функция 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 для этого решения.

Есть предложения по более чистому решению?