更改引导选项卡时图表更新

时间:2015-08-25 18:21:46

标签: d3.js nvd3.js

我的nvd3图表和引导响应标签出现问题。基本上我在一个标签上有一个图表。它加载正常,但是当我更改选项卡时,图形新选项卡的大小设置为0或类似的东西。我想非活动标签上的宽度设置为0,图形具有最小宽度。如果我更改标签,图表宽度不会调整大小。所以当点击标签时我必须用onclick更新图形?或者什么是最好的解决方案? 对不起,我无法制作jsfiddle,ObjectOutputStream.java。但我得到了TypeError: nv.addGraph is not a function 这是带有标签的图表: this is my try 这是我更改标签时: nvd3 multibar chart 当我调整窗口大小时,图表也会更新: nvd3 multibar chart wrong width 调整窗口大小后,我点击了每年的股息。也没有调整大小:nvd3 multibar chart 如何使用简单的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>

1 个答案:

答案 0 :(得分:1)

我找到了相同的帖子 - bootstrap tab with nvd3 graphs in it

$(function () {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        window.dispatchEvent(new Event('resize'));
    });
});