przerysowanie highcharts i reflow nie działa

Question

Próbuję zbudować dynamiczną stronę, która ma dowolną liczbę od 1 do 4 wykresów, które można dodawać lub usuwać w razie potrzeby, ale natknąłem się na ogromny problem i nie mogę się wydawać aby uzyskać grafikę do zmiany rozmiaru po zmianie rozmiaru zawierającego element div. na przykład, jeśli dodaję wykres na stronie, będzie to szerokość 800, następnie kliknij przycisk, aby dodać inny wykres, który powinien zmienić rozmiar na 400 sztuk, ale nie mogę tego zrobić. W bardzo uproszczonym modelu mam następujące

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'line', 
      width: 300 
     }, 
     title: { 
      text: 'Width is set to 300px' 
     }, 

     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 
    }); 
    $('#resize').click(function() { 
     $('#container').attr('style', 'width: 800px'); 
     $("#container").highcharts().reflow(); 
     console.log($('#container').width()); 
    }); 
}); 

teraz kiedy ten jest prowadzony będzie log 800 do okna dev narzędzi w chromie ale wykres nie zostanie zmieniony. Próbowałem zarówno redraw() i reflow() jak zasugerowano w dokumentacji highcharts. Przygotowałem nawet bardzo szybkie demo na jsfiddle tutaj, http://jsfiddle.net/7cbsV/ czy ktoś może mi pomóc. Jest to ważne. Z góry dziękuję za pomoc.

Answer 1

Co powiesz na proste użycie chart.setSize(w,h)? Zobacz docs.

$("#container").highcharts().setSize(800, height); 

Answer 2

Wystarczy usunąć szerokość wykresu z

$('#container').highcharts({ 
    chart: { 
     type: 'line', 
     width: 300 
    }, 

tak, to jak to

$('#container').highcharts({ 
    chart: { 
     type: 'line' 
    }, 

i ustawić szerokość kontenera do 300 jak to

#container { 
    width: 300px; 
} 

potem po prostu zmień rozmiar elementu div, tak jak już to robisz. wykres zmieni rozmiar zgodnie z szerokością div pojemnika.

mam nadzieję, że to pomoże.