gpt4 book ai didi

twitter-bootstrap - Morris.js 图表在 Bootstrap 选项卡内不起作用

转载 作者:行者123 更新时间:2023-12-03 23:40:11 25 4
gpt4 key购买 nike

我有一种情况,我试图在两个不同的 bootstrap tabs 中使用 MorrisJS 图表.图表在第一个(默认)选项卡中加载良好,但是当我单击第二个选项卡时,图表根本无法正确加载。这很奇怪,因为我将完全相同的图表复制并粘贴到第一个和第二个选项卡中,但第二个没有为我加载。

这是我设置的 jsfiddle 的链接。 https://jsfiddle.net/phz0e68d/5/

这是代码:

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'
});

第一个图表如下所示:

enter image description here

第二个图表如下所示:

enter image description here

如您所见,第二个图表根本没有正确加载。控制台中有关于负宽度的错误,但我不确定这是怎么可能的。

enter image description here

最佳答案

设置 Morris.Bar 属性 resize为真:

resize: true

将 Morris.Bar 分配给一个变量:
var homeBar = Morris.Bar({...});
var profileBar = Morris.Bar({...});

添加一个在选项卡更改时触发的事件,该事件会重绘条形图并触发调整大小:
$('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;
}
});

请参阅下面的完整工作片段:

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>

关于twitter-bootstrap - Morris.js 图表在 Bootstrap 选项卡内不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40517038/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com