javascript - highcharts omritning och omsättning fungerar inte

Jag försöker bygga en dynamisk sida som kan ha vilket antal som helst mellan 1-4 diagram på sig, som kan läggas till eller tas bort vid behov, men jag har stött på ett stort problem och jag kan inte få diagrammet att ändra storlek efter att den omgivande div:en ändrats. Till exempel, om jag lägger till ett diagram på sidan kommer det att ha bredden 800, sedan klickar jag på en knapp för att lägga till ett annat diagram, det borde då ändra storlek till 400 vardera, men jag kan inte få det att hända. Som en mycket förenklad modell har jag följande

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

nu när det körs kommer det att logga 800 till dev tools-fönstret i Chrome men grafen kommer inte att ändra storlek. Jag har provat både redraw() och reflow() som föreslagits i dokumentationen för Highcharts. Jag har till och med gjort en riktigt snabb demo på jsfiddle här, http://jsfiddle.net/7cbsV/ kan någon snälla hjälpa mig. Det är ganska viktigt. Tack på förhand för hjälpen.

Svar #1

Vad sägs om att använda enkel chart.setSize(w,h)? Se dokumentationen.

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

Svar #2

Ta bara bort bredden på diagrammet från

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

så att det blir så här

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

och ställ in behållarens bredd till 300 så här

#container {
   width: 300px;
}

ändra då bara storleken på containerns div som du redan gör. diagrammet kommer att ändra storlek beroende på containerns divs bredd.

hoppas det här hjälper.