onclick 触发调整大小，highcharts答案

【问题标题】：onclick trigger resize, highchartsonclick 触发调整大小，highcharts
【发布时间】：2016-09-14 08:48:21
【问题描述】：

我是 jQuery 世界的新手，我想在单击特定的 class 时触发 resize，我在 Google 上搜索了分配，但找不到任何解决方案。

我正在研究 Highcharts，其中将 full-width-box 动态添加到 panel 的父级，当 full-width-box 附加到 div 时，我想触发 resize。

这是我实现的代码，但我想得到解决方案

// code for highcharts
$(function () {
    $('.highcharts_horizontal_stacked').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
});


// for full width function
$('.full-width').click(function () {
  $(this).closest('[class^="col"]').toggleClass('full-width-box');
});


//function for resize
$(".full-width").click(function(e) {
  e.preventDefault();
  setInterval(function() {

    $(window).resize(function() {
      $('body').load( function(){
        $(window).trigger('resize');
      });
    })
  }, 1);
});

.full-width-box{
    width: 100%;
    z-index: 1;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Highcharts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div class="row">
  <div class="col-xs-6">
    <div class="panel panel-default ">
      <div class="panel-heading">
        <h3 class="panel-title">Title</h3>
        <a href="#fullwidth" class="full-width pull-right btn btn-success">
          <i class="glyphicon glyphicon-resize-full"></i>
        </a>
      </div>
      <div class="panel-body">
        <div class="highcharts_horizontal_stacked"></div>
      </div>
    </div>
  </div>
</div>

这是JsFiddle Link

【问题讨论】：

标签： javascript twitter-bootstrap highcharts triggers resize

【解决方案1】：

我发现window.dispatchEvent(new Event('resize')) 是触发调整大小的方式。

$('.full-width').click(function () {
  $(this).parents('[class^="col"]').toggleClass('full-width-box');
  window.dispatchEvent(new Event('resize'));
});

演示 http://www.codeply.com/go/qY1TSQOZ0r

附： - 您不需要其他点击/调整大小功能

【讨论】：

【解决方案2】：

编辑：更新代码

highcharts().reflow(); 可能会为您解决问题。

$('.full-width').click(function () {      
   $(this).closest('[class^="col"]').toggleClass('full-width-bo‌x');
   $( ".highcharts" ).each(function( index ) { 
      $(this).highcharts().reflow(); 
   }); 
});

https://jsfiddle.net/remisture/47ghxmc7/5/

【讨论】：

这个我知道，但是我的页面中有很多图表，所以，我无法为所有人写下代码......无论如何，谢谢:)
然后你可以为你的所有图表添加一个类并重新排列它们。更新了代码。