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

【问题标题】：Load Morris.js graph in active tab (bootstrap)在活动选项卡中加载 Morris.js 图（引导程序）
【发布时间】：2014-03-02 14:15:18
【问题描述】：

我有 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>

如何正确加载两个图表？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap morris.js

【解决方案1】：

你需要使用morris.js的master-branch，它支持

redraw()

并在事件中调用它

shown.bs.tab

或 js 小提琴： http://jsfiddle.net/rbsthlm/vbfzr/

【讨论】：

【解决方案2】：

使两个选项卡都处于活动状态，然后：

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

【讨论】：

你应该更好地格式化你的代码。编辑问题时，突出显示您的代码并按{} 按钮格式化您的代码。

【解决方案3】：

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

对我有用的是改用 jquery ui 选项卡 (link)。这些工作就像一个魅力。

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

顺便说一句，我发现所有试图捕捉事件 'shown.bs.tab' 的小提琴由于某种原因不再起作用。

【讨论】：