bootstrap 选项卡更改时图表更新
chart update when bootstrap tab changed
我的 nvd3 图表和 bootstrap 响应式标签有问题。基本上我在一个选项卡上有一个图表。它加载正常,但是当我更改选项卡时,图形新选项卡的大小设置为 0 或类似的值。我猜非活动选项卡上的宽度设置为 0 并且图形具有最小宽度。如果我更改选项卡,图形宽度不会调整大小。所以我必须在单击选项卡时使用 onclick 更新图表?或者最好的解决方案是什么?
很抱歉,我无法制作 jsfiddle,this is my try。但是我得到了 TypeError: nv.addGraph is not a function
.
这是我的带标签的图表:
这是我更改标签的时候:
当我调整 window 大小时,图形也会更新:
调整 window 大小后,我又点击了 Dividends Yearly。也没有调整大小:
如何使用简单的 onclick 函数调用更新图?是否存在类似于 WindowResize 的东西?
<ul class="nav nav-tabs responsive" role="tablist">
<li role="presentation" class="active">
<a href="#yearly" aria-controls="yearly" role="tab" data-toggle="tab"
onclick="nv.utils.windowResize(chart.update);">
Dividends Yearly</a></li>
<li role="presentation">
<a href="#quaterly" aria-controls="#quaterly" role="tab" data-toggle="tab"
onclick="nv.utils.windowResize(chart.update);">
Dividends Quarterly</a></li>
</ul>
我找到了相同的线程 - bootstrap tab with nvd3 graphs in it。
$(function () {
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
window.dispatchEvent(new Event('resize'));
});
});
我的 nvd3 图表和 bootstrap 响应式标签有问题。基本上我在一个选项卡上有一个图表。它加载正常,但是当我更改选项卡时,图形新选项卡的大小设置为 0 或类似的值。我猜非活动选项卡上的宽度设置为 0 并且图形具有最小宽度。如果我更改选项卡,图形宽度不会调整大小。所以我必须在单击选项卡时使用 onclick 更新图表?或者最好的解决方案是什么?
很抱歉,我无法制作 jsfiddle,this is my try。但是我得到了 TypeError: nv.addGraph is not a function
.
这是我的带标签的图表:
<ul class="nav nav-tabs responsive" role="tablist">
<li role="presentation" class="active">
<a href="#yearly" aria-controls="yearly" role="tab" data-toggle="tab"
onclick="nv.utils.windowResize(chart.update);">
Dividends Yearly</a></li>
<li role="presentation">
<a href="#quaterly" aria-controls="#quaterly" role="tab" data-toggle="tab"
onclick="nv.utils.windowResize(chart.update);">
Dividends Quarterly</a></li>
</ul>
我找到了相同的线程 - bootstrap tab with nvd3 graphs in it。
$(function () {
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
window.dispatchEvent(new Event('resize'));
});
});