Javascriptコードを繰り返して

Question

私は約16のグラフを含むダッシュボードを持っています。グラフのすべての設定は、データを除いて非常によく似ています。以下はコードです。コードを最適化する方法はありますか？現在、コードはほぼ2000行に及んでいます。

// Chart 1 

var chart1; 
// globally available 
var dataOld1 = [12, 45, 30, 80]; 
var dataNew1 = []; 
var limit1 = 35; 
var limit2 = 60; 
var color = '#E41B17'; 

for(var i = 0; i < dataOld1.length; i++) { 
    var valueO = dataOld1[i]; 
    if(valueO <= limit2 && valueO >= limit1) { 
     // Amber 
     var fillColor = '#FFE87C'; 
     var complete = "{fillColor:'" + fillColor + "',y:" + valueO + "}"; 
     dataNew1[i] = complete; 

    } else if(valueO > limit2) { 
     // Green 
     var fillColor = '#4CC552'; 
     var complete = "{fillColor:'" + fillColor + "',y:" + valueO + "}"; 
     dataNew1[i] = complete; 
    } else { 
     // Red 
     var fillColor = '#E41B17'; 
     var complete = "{fillColor:'" + fillColor + "',y:" + valueO + "}"; 
     dataNew1[i] = complete; 
    } 

} 

var newData1 = [] 
for(var i = 0; i < dataOld1.length; i++) { 
    var obj = eval('(' + dataNew1[i] + ')'); 
    newData1[i] = obj; 
} 

var categories = ['15 Jan', '22 Jan', '29 Jan', '5 Feb']; 

$(document).ready(function() { 
    chart1 = new Highcharts.Chart({ 

     chart : { 
      renderTo : 'mainchart1', 
      type : 'line', 
      fontSize : '1px', 
      shadow : false, 
      marginLeft : 33, 
      height : 125, 
      width : 165, 
     }, 
     title : { 
      text : null 
     }, 
     xAxis : { 
      categories : categories, 
      lineWidth : 1, 
      lineColor : '#000', 
     }, 
     yAxis : { 
      title : { 
       text : null 
      }, 
      lineWidth : 1, 
      lineColor : '#000', 
      min : 0, 
      max : 100, 
      minRange : 20, 
      minorGridLineColor : '#E0E0E0', 
      minorTickInterval : 'auto', 
      maxPadding : 0, 
      gridLineColor : '#CCC', 
      gridLineWidth : 1, 
      legend : { 
       enabled : false 
      }, 
      labels : { 
       formatter : function() { 
        return this.value + '%'; 
       } 
      } 
     }, 
     tooltip : { 
      formatter : function() { 
       return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '%'; 
      } 
     }, 
     legend : { 
      enabled : false 
     }, 
     series : [{ 

      data : newData1 

     }], 
     plotOptions : { 
      series : { 
       name : 'Team Briefing', 
       shadow : false, 
       marker : { 
        lineWidth : 2, 
        radius : 6, 
        symbol : 'circle' 
       } 
      } 
     }, 
     exporting : { 
      enabled : false 
     } 

    }); 

}); 

のみ、これらのデータは、

var dataOld1 = [12, 45, 30, 80]; 
var categories = ['15 Jan', '22 Jan', '29 Jan', '5 Feb']; 
renderTo : 'mainchart1', 

Answer 1

あなたは全部dataOld1と引数などのカテゴリをとる関数を作るべき変更されます。これにより、各グラフを単一の関数呼び出しに減らすことができます。

Answer 2

あなたは

dataOld = [dataOld1, dataOld2, dataOld3]; 

配列

の配列を作成し、（）ループのためdataOld [I] [J]と2を使用して結果を得ることができますか？

Answer 3

なぜevalの代わりにこれを実行しませんでしたか？

for(var i = 0; i < dataOld1.length; i++) { 
    var fillColor; 

    if(valueO <= limit2 && valueO >= limit1) { 
     // Amber 
     fillColor = '#FFE87C'; 
    } else if(valueO > limit2) { 
     // Green 
     fillColor = '#4CC552'; 
    } else { 
     // Red 
     fillColor = '#E41B17'; 
    } 
    dataNew[i] = { 'fillColor': fillColor, y: dataOld1[i] }; 
} 

次のforループは廃止されました。