Creazione dinamica di Highchart - non renderizzata correttamente

Question

Sto facendo un disegno di diagramma alto usando la funzione dinamica, non è affatto rovinoso dopo la funzione chiamata. più tardi se ridimensiono la finestra, ottiene il rendering dei dati? qualche motivo specifico per questo?

mia funzione:

var chart; 
$(document).ready(function(){ 

    function randomData(len){ 
     var arr = []; 
     for(var i = 0; i<len;i++){ 
      arr.push(Math.random()) 
     } 
     return arr; 
    } 

    var options = { 
     chart:{ 
      renderTo:'graph', 
      type:'line' 
     }, 
     title:{ 
      text:null 
     }, 
     xAxis: { 
      plotBands: [{ 
        from: 5, 
        to: 6, 
        color: 'yellow', 
        label: { 
          text: 'Yellow' 
        } 
      }, { 
        from: 10, 
        to: 11, 
        color: 'green', 
        label: { 
          text: 'Green' 
        } 
      }] 
    }, 
     plotOptions:{ 
      series:{ 
       animation:false, 
       dataLabels:{enabled:true,formatter:function(){return Highcharts.numberFormat(this.y)}} 
      } 
     } 
    } 

    chart = new Highcharts.Chart(options); 
    var i = 1, s1,s2,s3,s4; 

    function createChart(){ 
     s1 = chart.addSeries({data:randomData(20),name:'Line'+i},false); 
    } 

    $('#create').click(function(){ createChart() }); 

}) 

PLS controllare il mio jsfiddle.

http://jsfiddle.net/w46Sr/

Answer 1

è necessario aggiungere chart.redraw();

function createChart(){ 
    s1 = chart.addSeries({data:randomData(20),name:'Line'+i},false); 
    chart.redraw(); 
} 

Answer 2

Il problema è che si imposta il set di parametri di addSeries come false.
In questo caso, è necessario impostare come vero e ridisegnerà il grafico dopo aver aggiunto la nuova serie.

per una serie.

chart.addSeries({data:randomData(20),name:'Line'+i},true); 

Come nell'esempio seguente.
jsfiddle

Oppure, se si desidera aggiungere più di un serie in ogni clic è sufficiente per cambiare una cosa.

function createChart(seriesData){ 
    s1 = chart.addSeries(seriesData,false); 
} 

$('#create').click(function(){ 
    createChart(seriesData); 
    chart.redraw(); 
}); 

Si aggiungerà tutti i vostri serie e dopo che ridisegnare il grafico, quindi non c'è bisogno di ridisegnare il grafico ogni volta che si aggiunge un nuovo serie.