javascript - 在事件选项卡中加载 Morris.js 图表( Bootstrap )

Question

我有 2 个选项卡，每个选项卡有 1 个 morris.js 图表。第一个(事件)选项卡中的图表加载完美，但第二个选项卡中的图表无法加载(Chrome 中出现奇怪的结果，Firefox 中没有任何结果)。

参见 jsbin:http://jsbin.com/canajije/1/edit

<div class="row">   
<ul class="nav nav-tabs nav-justified">
  <li ><a href="#a" data-toggle="tab">Tab A</a></li>
  <li><a href="#b" data-toggle="tab">Tab B</a></li>
</ul>

<div class="tab-content col-sm-12" >
   <div class="tab-pane active" id="a">
       <div id="tab-a" style="height:200px;width:200px;"></div>
   </div>
   <div class="tab-pane" id="b">
     <div id="tab-b" style="height:200px;width:200px;"></div>
   </div>
</div>
  </div>

如何正确加载两个图表？

Answer 1

您需要使用morris.js的主分支，它支持

redraw()

并在事件中调用它

shown.bs.tab

更多信息在这里: http://www.doidea.se/blog/morris-js-charts-in-bootstrap-tabs

或者js-fiddle: http://jsfiddle.net/rbsthlm/vbfzr/