Javascript 尝试在多个highcharts中迭代数组

所以我有大量的数据，我需要显示所有存储在单独的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();
}

var库=['data/data.csv'，'data/attendanceGroup.csv']；
var libraryLength=library.length；
变量区域=[“#attendanceRoom”、“#attendanceGroup”]；
var i=0；
功能区域图（）{
$（函数（）{
$.get（库[i]，函数（csv）{
$（面积[i]）高图({
图表：{
类型：“区域”
},
数据：{
csv:csv
},
标题：{
文本：“按房间出勤”
},          
亚克斯：{
标题：{
文本：空
},
minorTickInterval:“自动”
},
图例：{
对齐：“左”，
垂直排列：“顶部”，
浮动：对
},
});
}); 
});
}
对于（i=0；i

我用jQuery.extend（）或Highcharts.setOptions来研究这个问题，但这会为每个图表设置选项，然后您只需一遍又一遍地创建它们。我认为更好的解决方案可能是只使用一个函数，然后针对每个图表重新运行它，特别是因为我从.CSV文件中提取数据

那么这可能吗？还是应该使用jQuery.extend（）

---

提前谢谢你的帮助

我只想改进两件事：

$（函数（）{}）-我将封装整个JS，而不仅仅是AJAX和Highcharts的一部分：

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

  ...

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

当然，您可以向

面积图

添加更多参数，例如

类型

，并传递应呈现的图表类型：

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

在

myChart（）

方法中：

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

---

这看起来是一个完美的解决方案，考虑到你的个人图表之间的微小/可预测的差异。谢谢！我不知道为什么这一改变很重要，但它确实如此，而且我知道它运行得很好。谢谢你的改进！如果某件事不起作用，那么很可能1解决了你的问题。在函数中等待加载事件有点奇怪。

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

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