2016-10-26 6 views
1

渡されたパラメータに基づいてHighchartsチャートを動的に作成する関数を作成しようとしています。私は次のようにします:javascript highcharts builder関数

function makeChart(name, title, series) 
{ 
    var options = { 
    chart: { 
     type: 'areaspline', 
     renderTo: name 
    }, 
    credits: { enabled: false },   
    legend: { enabled: true }, 
    title: { 
     text: title 
    }, 
    xAxis: { 
     type: 'datetime' 
    }, 
    yAxis: {    
     gridLineDashStyle: 'dot',    
     title: {    
     text: 'Quantity' 
     } 
    }, 
    plotOptions: { 
     areaspline: {    
      animation: false,    
      stacking: '',    
      lineWidth: 1,    
      marker: { enabled: false }    
     } 
    }, 
    series: [] //chart does not display except title. It will draw if I paste the data here manually 
}; 
this.chart = new Highcharts.Chart(options); 
for (index = 0; index < series.length; ++index) { 

options.series[index] = {'name':series[index][0], 'data':series[index][1], 'color':series[index][2], 'fillOpacity': .3}; 
    } 
} 
makeChart('container2', 'second chart', [['thisisname1', [20,21,22,23,24,25,26,27,28], '#d8d8d8']]);//calling function with test parameters 

私が見ることができるすべては、グラフのタイトルです。私は問題がシリーズ配列にデータを追加することにあると思う。私はいくつかの方法でそれを追加しようとしましたが、動作しませんでしたが、console.log(options.series)にデータが追加されていることがわかりました。任意のアイデアを修正する方法は?ありがとうございました。

答えて

1

forループの後にthis.chart = new Highcharts.Chart(options);を配置します。

グラフが初期化された後でデータを追加しています。これは、HighChartsに自分自身を再描画するように指示する必要があるため、ループの後でinitするのが簡単です。 :)

+1

ありがとう、それは働いた)) – Masha