Question

当您单击DIV时，我正在使用简单的JQuery和CSS方法来调整我的某个图表DIV的大小。 DIV调整为页面的100％。

示例在这里（或检查我的Fiddle）：

$('.col-sm-6').on('click', function() {
			$(this).toggleClass('clicked');
		});

.col-sm-6 {
			width: 68%;
			transition: width 2s !important;
      height: 100px;
      width: 100px;
      background: #ffffff;
		}
		.col-sm-6.clicked {
			z-index: 9999; 
			width: 100%; 
			height: 100%; 
			position: fixed; 
			top: 25px; 
			left: 0px;
		}

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<div class="col-sm-6" style="border:1px solid black">CLICK</div>

当DIV调整大小（并再次返回）时，如何调整上面示例中“col-sm-6”DIV中包含的图表svg的大小？似乎唯一一次调整大小是在实际的浏览器窗口发生变化时，而不仅仅是DIV。

我会在C3JS中使用onresize()函数吗？

Answer 1

您应该使用c3.js API .resize() 方法：

chart.resize({
  height: 640,
  width: 480
});

请在此处查看example。

你提到 onresize（） - 这只是网页调整大小的回调，而不会在.resize（）之后触发

Answer 2

对于将来遇到同样问题的人，这是我的解决方案：

$('#resize').on('click', function(){
   setTimeout(function () {
      chart5.resize({
        height: $("#election-stat-chart-05").height(),
        width: $("#election-stat-chart-05").width()
      });
    }, 500);
});

请参阅下面的代码：

＆＃13;

$(function () {

    // Initial chart
    var chart = c3.generate({
        data: {
            columns: [
                ['data1', 30, 20, 50, 40, 60, 50],
                ['data2', 200, 130, 90, 240, 130, 220],
                ['data3', 300, 200, 160, 400, 250, 250]
            ],
            type: 'bar'
        },
        bindto: '#election-stat-chart-05',
    });
	
    $('#resize').on('click', function(){
        setTimeout(function () {
            chart.resize({
                height: $("#election-stat-chart-05").height(),
                width: $("#election-stat-chart-05").width()
            });
        }, 500);
    });
});
/*-------------------*/
$('#resize').on('click', function(){
    $('.col-sm-6').toggleClass('resize');           
});

＆＃13;

.col-sm-6 {
  width: 68%;
  /*transition: width 1s !important;*/
}
.col-sm-6.resize {
  z-index: 9999; 
  width: 100%; 
  height: 300px; 
  position: fixed; 
  top: 25%; 
  left: 0px;
}

＆＃13;

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div class="col-sm-6">
  <div id="chart-05">
    <div class="keen-dataviz">
      <div class="keen-dataviz-title">Absentee Ballots by Precinct
        <div style="float:right;"><a id="resize">CLICK TO RESIZE</a>
        </div>
      </div>
      <div class="keen-dataviz-stage">
        <div id="election-stat-chart-05" style="margin-right: 10px; max-height: 223px; position: relative;">
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

我还更新了我的Fiddle。

调整DIV大小时重新绘制C3JS

2 个答案: