Creación dinámica de Highchart: no se representa correctamente

Question

Estoy haciendo un dibujo de un diagrama alto usando la función dinámica, no está desgarrando después de la función llamada. más tarde, si cambio el tamaño de la ventana, ¿se renderiza la información? ¿Alguna razón específica para esto?

mi función:

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 comprueban mi jsFiddle.

http://jsfiddle.net/w46Sr/

Answer 1

es necesario agregar chart.redraw();

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

Answer 2

El problema es que se establece el parámetro conjunto de addSeries como falso.
En este caso, debe establecer como verdadero y volverá a dibujar el gráfico después de agregar la nueva serie.

Para una serie.

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

Como en el siguiente ejemplo.
jsfiddle

O si desea agregar más de un serie en cada clic sólo hay que cambiar una cosa.

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

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

Va a añadir todos los de su serie y después de que volver a dibujar el gráfico, por lo que no tiene que volver a dibujar el gráfico cada vez que se agrega una nueva serie.