本文介绍了在活动选项卡中加载Morris.js图形(引导程序)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有两个标签,每个包含1个morris.js图。第一个(活动)选项卡中的图形加载完美,但第二个选项卡中的图形无法加载(Chrome中出现奇怪结果,Firefox中没有任何结果)。



请参阅jsbin:

 < 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 

更多信息在这里:


或js-fiddle:


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图形(引导程序)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-18 04:34