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/

Answer 2

激活两个标签然后：

$('.nav-tabs li a').last().tab('show');
$('.nav-tabs li a').first().tab('show');

Answer 3

就我而言，上述解决方案均无效。

对我有用的是使用 jquery ui标签代替（link）。这些工作就像一个魅力。

您的代码只需要轻微的重写。

顺便说一下，我发现因为某种原因试图抓住事件'shown.bs.tab'不再工作的所有小提琴。

在活动选项卡中加载Morris.js图（引导程序）

3 个答案: