试图迭代通过多个高图的数组

Question

所以我有大量的数据，我需要显示所有存储在单独的CSV文件。所以，我创建了两个图表只是highcharts罚款，一条线，一个区域，但不是复制并通过粘贴功能，一遍又一遍，我希望我可以通过它只是遍历像这样：

var library = ['data/data.csv', 'data/attendanceGroup.csv']; 
var libraryLength = library.length; 
var area =['#attendanceRoom','#attendanceGroup']; 
var i = 0; 

function areaChart(){ 
$(function() { 
    $.get(library[i], function(csv) { 
     $(area[i]).highcharts({ 
      chart: { 
       type: 'area' 
      }, 
      data: { 
       csv: csv 
      }, 
      title: { 
       text: 'Attendance by Room' 
      },   
      yAxis: { 
       title: { 
       text: null 
       }, 
       minorTickInterval: 'auto' 
      }, 

      legend:{ 
       align: 'left', 
       verticalAlign: 'top', 
       floating: true   
      }, 
     }); 
    }); 
}); 
} 

for (i = 0; i < libraryLength; i++){ 
areaChart(); 
} 

我一直在寻找在这Manage multiple highchart charts in a single webpage使用jQuery.extend（）或Highcharts.setOptions，但它为每个单独的图表设置选项，然后你只是一遍又一遍。我认为一个更好的解决方案可能是只有一个函数，然后为每个单独的图表重新运行它，特别是因为我从.CSV文件中提取数据。

这是可能的吗？或者我应该与jQuery.extend（）？

感谢您提前提供任何帮助！

Answer 1

只是两件事情我会改善：

1. $(function() { }); - 我将封装整个JS，不仅与AJAX和Highcharts部分：

   $(function() { 
       var library = ['data/data.csv', 'data/attendanceGroup.csv']; 
   
       ... 
   
       for (i = 0; i < libraryLength; i++){ 
        areaChart(); 
       } 
   }); 
   

2. 使library[i]和area[i]作为论据areaChart() ：

   $(function() { 
       var library = ['data/data.csv', 'data/attendanceGroup.csv']; 
   
       ... 
   
       function areaChart(lib, area){ 
       $.get(lib, function(csv) { 
        $(area).highcharts({ 
        chart: { 
         type: 'area' 
        }, 
        data: { 
         csv: csv 
        } 
        }); 
       }); 
       } 
   
       for (i = 0; i < libraryLength; i++){ 
       areaChart(library[i], area[i]); 
       } 
   }); 
   

当然，你可以添加更多的PARAMS到areaChart例如type，并通过对应该呈现什么样的图表：

$(function() { 
    var library = ['data/data.csv', 'data/attendanceGroup.csv']; 
    var types = ['line', 'area']; 

    ... 

    function areaChart(lib, area, type){ 
     $.get(lib, function(csv) { 
     $(area).highcharts({ 
      chart: { 
      type: type 
      }, 
      data: { 
      csv: csv 
      } 
     }); 
     }); 
    } 

    for (i = 0; i < libraryLength; i++){ 
     areaChart(library[i], area[i], types[i]); 
    } 
}); 

不要与PARAMS过分，没有人喜欢阅读10params和控制命令等。相反，你可能会考虑通过一个对象参数（从areaChart更名为myChart）：

myChart({ 
    lib: library[i], 
    area: area[i], 
    type: types[i] 
}); 

而且在myChart()方法：

function myChart(options) { 
    $.get(options.lib, function(csv) { 
     $(options.area).highcharts({ 
      chart: { 
       type: options.type 
      }, 
      data: { 
       csv: csv 
      } 
     }); 
    }); 
}