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

Estoy haciendo un dibujo de alta calidad usando la función dinámica, no está del todo rending después de la función llamada. Más tarde, si cambio el tamaño de la ventana, se obtiene la representación de los datos? ¿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() }); }) 

Por favor revise mi jsfiddle.

http://jsfiddle.net/w46Sr/

Necesitas agregar chart.redraw ();

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

El problema es que establece el parámetro set 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 el siguiente ejemplo.
jsfiddle

O si desea agregar más de una serie en cada clic, solo tiene que cambiar una cosa.

 function createChart(seriesData){ s1 = chart.addSeries(seriesData,false); } $('#create').click(function(){ createChart(seriesData); chart.redraw(); }); 

Agregará todas sus series y, después, volverá a dibujar el gráfico, para que no tenga que volver a dibujar el gráfico cada vez que agregue una nueva serie.