javascript - Bootstrap 崩溃时触发窗口调整大小

Question

我在放置在 Bootstrap 折叠 div 中的 c3.js 图表时遇到尺寸问题。类似于 this question 。根据答案，我试图在每次加载 c3 图表时触发窗口调整大小，但似乎不起作用。我知道这是一个基本问题(jquery 无知)，但是我如何运行 $(window).trigger('resize');每次我加载图表或打开面板折叠 div 时？

html:

<div class="col-sm-4">                  
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse4"><center>Title</center></a>
                </h4>
            </div>
            <div id="collapse4" class="panel-collapse collapse">
                <div id="chart3"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>
</div>

js:

$(function () {
    var chart = c3.generate({
        bindto: '#chart3',
        data: {
            columns: [
                ['data1', 30],
                ['data2', 50]
            ],
            type: 'donut',
        }
    });
    $(window).trigger('resize');
});

Answer 1

绑定(bind)到.click()事件:

$(document).ready(function() {
  $(".panel-collapse collapse").click(function() {
    $(window).trigger('resize');
  });
});

对于图表加载，这取决于您如何调用它来生成。如果c3.generate()是图形加载函数，然后创建另一个包装函数，该函数调用 c3.generate()和$(window).trigger('resize');然后始终加载图表:

function generateAndResizeWindow(options) {
  options.onrendered = function() { $(window).trigger('resize') }; // or whatever function generates your graph
  c3.generate(options);
}

然后调用为:

generateAndResizeWindow({
    bindto: '#chart3',
    data: {
        columns: [
            ['data1', 30],
            ['data2', 50]
        ],
        type: 'donut',
    }
});

举个例子。