Question

背景

我刚刚决定将我的Django应用程序升级为bootstrap 3，在将手风琴转换为面板之后，我发现之前曾经工作的Jqplot不再有用了。我有三个手风琴作为一个组，每个都包含一个Jqplot脚本，还有一个div，其中必须显示绘图。

骨架的外观如下：

<div class="panel-group" id="accordion2">
  <div class="panel panel-default">
    <div class="panel-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
          First Heading
        </a>
       <script>
        $(document).ready(function(){
          // generic jqplot barchart that goes like this...
          // var plot1 = $.jqplot('chartdiv', s1, {...
          });
        </script>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <div id="chartdiv"></div>
        </div>
      </div>
    </div>

另外两个panel panel-default div也是如此。（另外两个以相同方式编写的图。）

问题

这是在这一行： <div id="collapseOne" class="panel-collapse collapse in">

当我使用class="panel-collapse collapse"折叠面板时，它会像预期的那样折叠，但即使调用内部document.ready()，也不会生成绘图。

但是，如果我将其作为class="panel-collapse collapse in"，则面板不会折叠，也会生成绘图。

问题

我需要让第一个面板解除折叠，其他两个默认折叠，但是当我使用上面提到的类时，第二个和第三个图表没有生成（具体来说，没有生成Jqplot画布）。

我想这必须与Bootstrap 3及其对手风琴的更改有关，因为它曾经在我的旧应用程序（使用旧版本）中工作。

我该如何克服这个问题？

Answer 1

您在document.ready上生成图表是正确的，因为折叠仅通过css隐藏内容。阅读这个问题fullcalendar not visible until button is clicked or window resized?也许它对你有帮助。

要在崩溃时生成“实时”内容，请考虑崩溃插件的事件，请参阅：http://getbootstrap.com/javascript/#collapse-usage。您可以尝试在shown.bs.collapse上生成绘图。

另请务必阅读：http://learn.jquery.com/using-jquery-core/document-ready/

从面板内部崩溃调用时，jqplot不呈现？

1 个答案: