onclick trigger resize, highcharts

Question

Я новичок в мире jQuery, я хочу вызвать resize, когда я нажимаю на конкретный class, I Go Goled allot, но не нахожу никакого решения.

Я работаю на 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

Answer 1

Я обнаружил, что window.dispatchEvent(new Event('resize')) путь, чтобы вызвать изменение размеров.

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

Demohttp://www.codeply.com/go/qY1TSQOZ0r

P.S. - вам не нужен другой щелчок/функция изменения размера

Answer 2

EDIT: Изменено код

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/