Question

我有一个c3.js图表的大小调整问题我放在bootstrap collapse div中。与this question相似。在答案之后，我试图在每次加载c3图表时触发窗口调整大小，但似乎不起作用。我知道它是一个基本问题（jquery无知），但是每次加载图表或打开面板折叠div时如何运行$(window).trigger('resize');？

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');}
});

触发器窗口在引导程序崩溃时调整大小

2 个答案: