ブートストラップのcollapsedivに配置した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');
});
.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',
}
});
あなたの例のために。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加