尝试通过多个 highcharts 迭代数组

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();
}

我正在使用 jQuery.extend() 或 Highcharts.setOptions 查看这个Manage multiple highchart charts in a single webpage，但它会为每个单独的图表设置选项，然后你只需一遍又一遍地制作它们。我认为更好的解决方案可能是只拥有一个函数，然后为每个单独的图表重新运行它，特别是因为我从 .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]);
     }
   });
   

当然，您可以在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]);
    }
});

不要过度使用参数，没有人喜欢阅读 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
            }
        });
    });
 }