2

我有一个页面，其中有 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>

可以在这个 jsFiddle中找到一个工作示例。

4

1 回答 1

2

Your tab-pane ID and chart div ID should not be the same.

<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 provides a resize method that automatically adjusts the chart widths as the page/container is resized. You could call this when the window is resized and when a tab is shown:

$(window).on("resize orientationchange", function () {        
    kendo.resize($("body"));
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    kendo.resize($("body"));
});

Updated FIDDLE

If you still have issues with the initial size, you could create the charts the first time the corresponding tab is shown.

于 2015-07-15T16:37:36.837 回答