在活动选项卡中加载Morris.js图形（引导程序） [英] Load Morris.js graph in active tab (bootstrap)

问题描述

我有两个标签，每个包含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 =＃adata-toggle =tab>标签A< / a>< / li> 
< li>< a href =＃bdata-toggle =tab>标签B< / a>< / li> 
< / ul> 
 
< div class =tab-content col-sm-12> 
< div class =tab-pane activeid =a> 
< div id =tab-astyle =height：200px; width：200px;>< / div> 
< / div> 
< div class =tab-paneid =b> 
< div id =tab-bstyle =height：200px; width：200px;>< / div> 
< / div> 
< / div> 
< / div> 
  

如何正确加载两张图？

解决方案

您需要使用支持

  redraw（）
  

并在事件中调用

  shown.bs.tab 
  

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

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

I have 2 tabs with 1 morris.js graph in each. The Graph in the first (active) tab loads perfectly, but the graph in the second tab doesn't load (strange result in Chrome, nothing in Firefox).

See 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>

How to load both graphs correctly?

解决方案

You need to use the master-branch of morris.js which has support for

redraw()

and call that on the event

shown.bs.tab

more info here: http://www.doidea.se/blog/morris-js-charts-in-bootstrap-tabs

or js-fiddle: http://jsfiddle.net/rbsthlm/vbfzr/

这篇关于在活动选项卡中加载Morris.js图形（引导程序）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！