在启动折叠时触发窗口大小调整

Trigger window resize on bootstrap collapse

本文关键字：窗口大小 调整 启动 折叠      更新时间：2023-09-26

我有一个c3.js图表的大小问题，我已经在一个引导折叠div。类似于这个问题。根据答案，我试图在每次加载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');
});

绑定.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);
}

then call as:

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

在代码后面添加这些行。

chart.load({
  done: function() {$(window).trigger('resize');}
});
相关文章：