Question

所以我需要显示大量数据才能显示所有存储在单独CSV文件中的数据。所以我在高图，一行，一个区域中创建了两个图表，但是不是一遍又一遍地复制和粘贴函数，我希望我可以像这样迭代它：

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

我会改进两件事：

$(function () { }); - 我会封装整个JS，不仅仅是AJAX和Highcharts的一部分：

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

  ...

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

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

不要过度使用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
            }
        });
    });
 }

试图通过mutliple highcharts迭代一个数组

1 个答案: