Попытка итерации массива через mutliple 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(); 
} 

Я искал на этом 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 
      } 
     }); 
    }); 
}