调整 DIV 大小时 C3JS 重绘

Question

我正在使用一种简单的 JQuery 和 CSS 方法在您单击 DIV 时调整我的一个图表 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 的大小？似乎唯一一次调整大小是在实际浏览器 window 发生变化时，而不仅仅是 DIV.

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

Answer 1

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

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

请参阅此处 example。

您提到了 onresize() - 这只是网页调整大小时的回调，它不会在 .resize()[ 之后触发=13=]

Answer 2

对于以后遇到同样问题的任何人，这是我的解决方案：

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

查看下面的代码片段：

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

.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;
}

<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>

我也更新了我的Fiddle。

调整 DIV 大小时 C3JS 重绘

C3JS redraw when DIV is resized

jquery

c3.js