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