déclencheur onclick redimensionner, highcharts

Question

Je suis nouveau dans le monde de jQuery, je veux déclencher resize lorsque je clique sur un class J'ai beaucoup cherché sur Google, mais je n'ai trouvé aucune solution.

Je travaille sur Highcharts, dans lequel j'ajoute dynamiquement full-width-box au parent de panel quand full-width-box est ajouté à la div Je veux déclencher le resize .

Voici le code que j'ai mis en œuvre, mais je n'ai pas trouvé la solution.

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

Voici le Lien JsFiddle

Answer 1

J'ai constaté que window.dispatchEvent(new Event('resize')) est le moyen de déclencher le redimensionnement.

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

Demo http://www.codeply.com/go/qY1TSQOZ0r

P.S. - vous n'avez pas besoin de l'autre fonction cliquer/redimensionner.

Answer 2

EDIT : Code mis à jour

highcharts().reflow(); pourrait faire l'affaire pour vous.

$('.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/