我有一个页面,其中有 3 个 Kendo UI 图表,每个图表都位于一个单独的选项卡中。我希望所有图表都使用可用的完整宽度,但只有第一个图表这样做。
我知道我可以指定图表的宽度,但我不想/无法预先指定这一点(响应能力等)。我尝试过调整包含图表的 div 的宽度。我还尝试设置 col-lg-12
这些 div 上的类。似乎没有任何作用。
这是我的 html:
<ul class="nav nav-tabs">
<li class="active"><a data-target="#chart1" data-toggle="tab">Chart 1</a></li>
<li><a data-target="#chart2" data-toggle="tab">Chart 2</a></li>
<li><a data-target="#chart3" data-toggle="tab">Chart 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="chart1">
<div id="chart1"></div>
</div>
<div class="tab-pane fade in" id="chart2">
<div id="chart2"></div>
</div>
<div class="tab-pane fade in" id="chart3">
<div id="chart3"></div>
</div>
</div>
可以在this jsFiddle中找到一个工作示例。 .
最佳答案
您的选项卡 Pane ID 和图表 div ID 不应相同。
<div class="tab-pane fade in active" id="chart1tab">
<div id="chart1"></div>
</div>
<div class="tab-pane fade in" id="chart2tab">
<div id="chart2"></div>
</div>
<div class="tab-pane fade in" id="chart3tab">
<div id="chart3"></div>
</div>
Kendo 提供了一种调整大小方法,可以在调整页面/容器大小时自动调整图表宽度。您可以在调整窗口大小和显示选项卡时调用此方法:
$(window).on("resize orientationchange", function () {
kendo.resize($("body"));
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
kendo.resize($("body"));
});
Updated FIDDLE
如果您对初始大小仍有疑问,您可以在第一次显示相应选项卡时创建图表。
关于twitter-bootstrap - 强制 Kendo UI Chart 使用 Bootstrap 选项卡的全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31424103/