ハイチャートの動的作成 - 適切にレンダリングされない

Question

ダイナミック関数を使用してハイチャートを作成していますが、呼び出された後にレンダリングが行われません。後でウィンドウのサイズを変更すると、データがレンダリングされますか？これの具体的な理由は何ですか？

私の機能：

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は私のjsfiddleをご確認ください。

http://jsfiddle.net/w46Sr/

Answer 1

あなたは）（chart.redrawを追加する必要があります。

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

Answer 2

問題は、あなたが偽としてaddSeriesの設定パラメータを設定することです。
この場合、trueに設定しなければならず、新しいセリを追加した後にグラフが再描画されます。

1セリフ。

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

次の例のようになります。
jsfiddle

それとも、それぞれに1つのセリエよりより追加したい場合は、単に一つのことを変更する必要があります。

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

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

あなたはシリーズのすべてを追加したり、チャート、新しいセリエを追加するたびに再描画する必要はありませんので、その後、チャートを再描画します。