我想讓此Javascript功能更有效率？

Question

我有三個使用Google Charts API生成的餅圖。我想進一步壓縮這個函數，因爲有很多重複。是否有一個循環我可以爲它等

if (data) { 
      var myVar = []; 
      var myVar1 = []; 
      var myVar2 = []; 

      myVar.push(['Label', 'Value']); 
      myVar1.push(['Label', 'Value']); 
      myVar2.push(['Label', 'Value']); 

      myVar.push(['Car Sales Today', data.salesToday, ]); 
      myVar1.push(['Car Sales Yesterday', data.salesYesterday]); 
      myVar2.push(['Car Sales Last Week', data.salesLastWeek]); 

      var build1 = { 
       package: 'PieChart', 
       data: myVar, 
       customTooltips: [ 
        data.salesToday, 
       ], 
       container: 'today-sales-chart', 
       options: { 
        width: 'auto', 
        height: 300, 
        chartArea: { width: '50%', height: '80%' }, 
        yAxis: { textPosition: 'none' }, 
        legend: { position: "bottom" }, 
        tooltip: { isHtml: true }, 
        colors: ['#e6dc39'], 
        pieSliceText: 'none' 
       } 
      }; 
      var build2 = { 
       package: 'PieChart', 
       data: myVar1, 
       customTooltips: [ 
        data.salesYesterday, 
       ], 
       container: 'yesterday-sales-chart', 
       options: { 
        width: 'auto', 
        height: 300, 
        chartArea: { width: '50%', height: '80%' }, 
        yAxis: { textPosition: 'none' }, 
        legend: { position: "bottom" }, 
        tooltip: { isHtml: true }, 
        colors: ['#33bb18'], 
        pieSliceText: 'none' 
       } 
      }; 
      var build3 = { 
       package: 'PieChart', 
       data: myVar2, 
       customTooltips: [ 
        data.salesLastWeek 
       ], 
       container: 'lastweek-sales-chart', 
       options: { 
        width: 'auto', 
        height: 300, 
        chartArea: { width: '50%', height: '80%' }, 
        yAxis: { textPosition: 'none' }, 
        legend: { position: "bottom" }, 
        tooltip: { isHtml: true }, 
        colors: ['#e06e29'], 
        pieSliceText: 'none' 
       } 
      }; 
      charts.push(build1, build2, build3); 
      google.setOnLoadCallback.drawCharts(build1.container); 
      google.setOnLoadCallback.drawCharts(build2.container); 
      google.setOnLoadCallback.drawCharts(build3.container); 
     } 

我試圖做的，例如以下：

var myVar, myVar1, myVar2 = []; 

，但我得到一個錯誤。任何幫助都會很棒。

Answer 1

我花了一些時間來優化你的代碼，但我沒有測試它。確保所有的變量名都ok，不要讓衝突在你的代碼

if (data) { 
    var allData = [{ 
      arr : [['Label', 'Value'], ['Car Sales Today', data.salesToday]], 
      container : 'today-sales-chart', 
      customTooltips: data.salesToday 
     } 
     ,{ 
      arr : [['Label', 'Value'], ['Car Sales Yesterday', data.salesYesterday]], 
      container : 'yesterday-sales-chart', 
      customTooltips: data.salesYesterday 
     } 
     ,{ 
      arr : [['Label', 'Value'], ['Car Sales Last Week', data.salesLastWeek]], 
      container : 'lastweek-sales-chart', 
      customTooltips: data.salesLastWeek 
     } 
    ]; 

    var options = { 
     width: 'auto', 
     height: 300, 
     chartArea: { width: '50%', height: '80%' }, 
     yAxis: { textPosition: 'none' }, 
     legend: { position: "bottom" }, 
     tooltip: { isHtml: true }, 
     colors: ['#e6dc39'], 
     pieSliceText: 'none' 
    } 

    var builds = []; 
    for (var index in allData) { 
     builds.push({ 
      package: 'PieChart', 
      data: allData[index].arr, 
      customTooltips: [ allData[index].customTooltips ], 
      container: allData[index].container, 
      options: options 
     }); 
    } 

    for(var index in builds) { 
     charts.push(builds[index]); 
     google.setOnLoadCallback.drawCharts(builds[index].container); 
    } 
} 

更新

添加的可能性來改變顏色，在這種情況下，你不需要使用選項作爲自變量：

var builds = []; 
    for (var index in allData) { 
     builds.push({ 
      package: 'PieChart', 
      data: allData[index].arr, 
      customTooltips: [ allData[index].customTooltips ], 
      container: allData[index].container, 
      options: { 
       width: 'auto', 
       height: 300, 
       chartArea: { width: '50%', height: '80%' }, 
       yAxis: { textPosition: 'none' }, 
       legend: { position: "bottom" }, 
       tooltip: { isHtml: true }, 
       colors: allData[index].color, // <--- you set the color here 
       pieSliceText: 'none' 
      } 
     }); 
    }