Morris.js图表在引导选项卡中不起作用 [英] Morris.js chart not working inside of a bootstrap tab
本文介绍了Morris.js图表在引导选项卡中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到一种情况，我试图在两个不同的
第二个图表如下：
< a href = https://i.stack.imgur.com/vF7Ka.png rel = noreferrer>
您可以看到第二张图表根本无法正确加载。控制台中出现负宽度错误，但我不确定这怎么可能。
解决方案
将Morris.Bar属性 resize 设置为true：
调整大小：true
将您的Morris.Bar分配给变量：
var homeBar = Morris.Bar（{...}）;
var profileBar = Morris.Bar（{...}）;
添加在标签更改时触发的事件，该事件可重绘条形图并触发调整大小：
$（'a [data-toggle = tab]'）。on（'shown.bs.tab'，函数（e） {
var target = $（e.target）.attr（ href）//启用制表符
开关（目标）{
case #home：
homeBar.redraw（）;
$（window）.trigger（'resize'）;
break;
case #profile：
profileBar.redraw（）;
$（window）.trigger（'resize'）;
break;
}
}）；
请参阅下面的完整代码段：
var homeBar = Morris.Bar（{element：'chart1'，data：[{y：'2006'，a ：100，b：90}，{y：'2007'，a：75，b：65}，{y：'2008'，a：50，b：40}，{y：'2009'，a：75 ，b：65}，{y：'2010'，a：50，b：40}，{y：'2011'，a：75，b：65}，{y：'2012'，a：100，b ：90}]，xkey：'y'，ykeys：['a'，'b']，标签：['Series A'，'Series B']，hideHover：'always'，resize：true}）; var profileBar = Morris.Bar（{element：'chart2'，data：[{y：'2006'，a：100，b：90}，{y：'2007'，a：75，b：65}，{y ：'2008'，a：50，b：40}，{y：'2009'，a：75，b：65}，{y：'2010'，a：50，b：40}，{y：' 2011'，a：75，b：65}，{y：'2012'，a：100，b：90}]，xkey：'y'，ykeys：['a'，'b']，标签：['Series A'，'Series B']，hideHover：'always'，resize：true}））; $（'a [data-toggle = tab]'）。on（'shown.bs.tab '，function（e）{var target = $（e.target）.attr（ href）//激活的选项卡开关（目标）{case #home：homeBar.redraw（）; $（window）.trigger（’resize’）;打破;案例 #profile：profileBar.redraw（）; $（window）.trigger（’resize’）;打破; }}）;
< script src = https： //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><script src = https://cdnjs.cloudflare.com/ajax/libs /raphael/2.1.0/raphael-min.js\"></script><script src = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js >< / script><脚本src = // cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js\"></script><link href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel = stylesheet />< link href = // cdnjs.cloudflare.com/ajax/ libs / morris.js / 0.5.1 / morris.css rel = stylesheet /><！-导航标签->< ul class = nav导航标签 role = tablist> ; < li role = presentation class = active>< a href =＃home aria-controls = home role = tab data-toggle = tab> Home< / a> < / li> < li role = presentation>< a href =＃profile aria-controls = profile role = tab data-toggle = tab> Profile< / a> < / li>< / ul>< ;!-选项卡窗格->< div class = tab-content> < div role = tabpanel class = tab-pane active id = home> < div class = row> < div class = col-md-12> < div id = chart1 style = height：200px;>< / div> < / div> < / div> < / div> < div role = tabpanel class = tab-pane id = profile> < div class = row> < div class = col-md-12> < div id = chart2 style = height：200px;>< / div> < / div> < / div> < / div>< / div>
I have a situation where I am trying to use MorrisJS charts inside two different bootstrap tabs. The chart loads fine in the first (default) tab but when I click into the second tab the chart doesn't load properly at all. It is very odd as I am copying and pasting the exact same chart to be in the first and second tab but the second one isn't loading for me.
Here is a link to a jsfiddle I setup. https://jsfiddle.net/phz0e68d/5/
Here is the code:
HTML:
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="row">
<div class="col-md-12">
<div id="chart1" style="height: 200px;"></div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="row">
<div class="col-md-12">
<div id="chart2" style="height: 200px;"></div>
</div>
</div>
</div>
</div>
</div>
Javascript:
Morris.Bar({
element: 'chart1',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
hideHover: 'always'
});
Morris.Bar({
element: 'chart2',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
hideHover: 'always'
});
The first chart looks like this:
The second chart looks like this:
As you can see the second chart isn't loading properly at all. There is an error in the console about a negative width but I am not sure how that is possible.
解决方案
Set the Morris.Bar property resize to true:
resize: true
Assign your Morris.Bar to a variable:
var homeBar = Morris.Bar({...});
var profileBar = Morris.Bar({...});
Add an event triggered on tab change that redraws the bar chart and triggers a resize:
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var target = $(e.target).attr("href") // activated tab
switch (target) {
case "#home":
homeBar.redraw();
$(window).trigger('resize');
break;
case "#profile":
profileBar.redraw();
$(window).trigger('resize');
break;
}
});
See full working snippet below:
var homeBar = Morris.Bar({
element: 'chart1',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
hideHover: 'always',
resize: true
});
var profileBar = Morris.Bar({
element: 'chart2',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
hideHover: 'always',
resize: true
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var target = $(e.target).attr("href") // activated tab
switch (target) {
case "#home":
homeBar.redraw();
$(window).trigger('resize');
break;
case "#profile":
profileBar.redraw();
$(window).trigger('resize');
break;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="row">
<div class="col-md-12">
<div id="chart1" style="height: 200px;"></div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="row">
<div class="col-md-12">
<div id="chart2" style="height: 200px;"></div>
</div>
</div>
</div>
</div>
这篇关于Morris.js图表在引导选项卡中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
