引導窗口崩潰時觸發窗口調整大小

Question

我在引導折疊div中放置的c3.js圖表​​存在尺寸調整問題。 類似這個問題 。 按照答案，每次嘗試加載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

綁定到.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',
    }
});

舉個例子

Answer 2

在代碼后添加這些行。

chart.load({
  done: function() {$(window).trigger('resize');}
});