强制 Kendo UI 图表使用 Bootstrap 选项卡的全宽 [重复]

Posted

技术标签:

【中文标题】强制 Kendo UI 图表使用 Bootstrap 选项卡的全宽 [重复]【英文标题】:Forcing Kendo UI Chart to use full width of Bootstrap tab [duplicate] 【发布时间】:2015-10-04 02:55:33 【问题描述】:

我有一个页面,其中有 3 个 Kendo UI 图表,每个图表位于一个单独的选项卡中。我希望所有图表都使用可用的全宽,但只有第一个这样做。

我知道我可以为图表指定宽度,但我不想/不能预先指定这个(响应性和所有)。我尝试过使用包含图表的 div 的宽度。我还尝试在这些 div 上设置 col-lg-12 类。似乎没有任何效果。

这是我的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 中找到一个工作示例。

【问题讨论】:

Rienus 修复适用于您的 jsFiddle。 ***.com/questions/17206631/… 。干杯 【参考方案1】:

您的选项卡窗格 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"));
);

更新FIDDLE

如果您对初始大小仍有疑问,您可以在第一次显示相应选项卡时创建图表。

【讨论】:

以上是关于强制 Kendo UI 图表使用 Bootstrap 选项卡的全宽 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

kendo-ui图表的类别标签中的换行符

如何在 Kendo UI 图表上包装 categoryAxis 文本

Kendo-UI图表中的刷新方法和重绘方法有啥区别?

无法在 Kendo UI 图表上通过 xpath 定位 SVG 元素

无法在Kendo UI图表上通过xpath定位SVG元素

Kendo UI 图表 - 如何在加载数据时显示动画?