我正在使用引导选项卡来显示月度和周度图表。当我选择第二个选项卡图表不适合时,图表在第一个选项卡中正确加载col-md-3
。如何修复此错误?
问问题
2577 次
1 回答
1
CanvasJS Chart 根据容器的尺寸自动设置图表的高度和宽度。如果未为容器设置值,则采用默认值。
在引导程序中,由于最初不显示第二个选项卡,因此图表采用默认值。为了解决这个问题,当bootstrap 触发shown.bs.tab事件时,将呈现第二个图表。
这是相同的工作代码。
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: false,
axisY: {
includeZero: false,
},
axisX: {
interval: 1,
intervalType: "day",
valueFormatString: "DD-MMM",
labelAngle: -35,
},
data: [{
type: "candlestick",
dataPoints: [{
x: new Date(2016, 0, 21),
y: [35670, 35679.95, 34500.05, 34909.1]
}, {
x: new Date(2016, 0, 20),
y: [36180, 36180, 34620, 35040.25]
}, {
x: new Date(2016, 0, 19),
y: [36225, 36800, 35540, 36362]
}, {
x: new Date(2016, 0, 18),
y: [37311, 37950, 36000, 36193.2]
}, {
x: new Date(2016, 0, 15),
y: [38300, 38480, 37500, 37688.05]
}, ]
}]
});
chart.render();
function ct1() {
var chart1 = new CanvasJS.Chart("chartContainer1", {
zoomEnabled: false,
axisY: {
includeZero: false,
},
axisX: {
interval: 1,
intervalType: "day",
valueFormatString: "DD-MMM",
labelAngle: -35,
},
data: [{
type: "candlestick",
dataPoints: [{
x: new Date(2016, 0, 21),
y: [35670, 35679.95, 34500.05, 34909.1]
}, {
x: new Date(2016, 0, 20),
y: [36180, 36180, 34620, 35040.25]
}, {
x: new Date(2016, 0, 19),
y: [36225, 36800, 35540, 36362]
}, {
x: new Date(2016, 0, 18),
y: [37311, 37950, 36000, 36193.2]
}, {
x: new Date(2016, 0, 15),
y: [38300, 38480, 37500, 37688.05]
}, ]
}]
});
chart1.render();
}
$('#bs-tab2').on("shown.bs.tab", function() {
ct1();
$('#bs-tab2').off(); //to remove the binded event after initial rendering
});
.container {
background: #ccc
}
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<div class="col-md-3">
<ul class="nav nav-pills nav-jt">
<li class="active"><a data-toggle="tab" href="#tab1">Week</a>
</li>
<li><a data-toggle="tab" id="bs-tab2" href="#tab2">Month</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in">
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</div>
<div id="tab2" class="tab-pane">
<div id="chartContainer1" style=" height: 300px; width: 100%;"></div>
</div>
</div>
</div>
</div>
于 2016-01-29T05:35:44.353 回答