Создание блоков JavaScript и HTML на лету

Question

На моем веб-сайте в настоящее время я использую 3 CSV-файла, которые отрисовываются старшими диаграммами со следующим javascript:

$(document).ready(function() {
   $.get('export_xxxx.csv', function(csv) {
      $('#xxx').highcharts({
         data: {
            csv: csv
         },
         title: {
            text: 'Twitter (@xxxxx)'
         },
         yAxis: {
            allowDecimals: false,
            title: {
               text: 'Users'
            }
         },
         series: [{
            visible: true
         }, {
            visible: false
         }],
         plotOptions: {
            line: {
               dataLabels: {
                  enabled: true
              }
            } 
         },
      });
   });
});

$(document).ready(function() {
   $.get('export_xxxxyy.csv', function(csv) {
      $('#xxx').highcharts({
         data: {
            csv: csv
         },
         title: {
            text: 'Twitter (@xxxx)'
         },
         yAxis: {
            allowDecimals: false,
            title: {
               text: 'Users'
            }
         },
         series: [{
            visible: true
         }, {
            visible: false
         }],
         plotOptions: {
            line: {
               dataLabels: {
                  enabled: true
               }
            }
         },
      });
   });
});

$(document).ready(function() {
   $.get('export_xxx_.csv', function(csv) {
      $('#xxx').highcharts({
         data: {
            csv: csv
         },
         title: {
            text: 'Twitter (@xxx)'
         },
         yAxis: {
            allowDecimals: false,
            title: {
               text: 'Users'
            }
         },
         series: [{
            visible: true
         }, {
            visible: false
         }],
         plotOptions: {
            line: {
               dataLabels: {
                  enabled: true
               }
            }
         },
      });
   });
});

и 3 строки html (это похоже на панель инструментов).

<div id="xxx" style="width: 49%; height: 400px; margin: 0 auto;float:left;"></div>

Мое желание состоит в том, чтобы создать HTML-страницу с javascript старшими диаграммами, чтобы обрабатывать столько же, сколько csv есть в DocumentRoot моего сайта.

Например, если я добавлю 10 CSV-файлов, общий HTML-файл будет отображать 10 различных диаграмм на одной странице, без редактирования вручную HTML-страницы и добавления JavaScript. Генерируется на лету, в зависимости от того, сколько существует CSV-файл.

Спасибо за вашу помощь,

Answer 1

Предполагая, что ваш веб-сервер дает JSON-ответ для списка файлов, скажем так,

[ '/data1.csv', /date2.csv', ... ]

Вы можете использовать что-то вроде этого

$.get('/data', function(listOfFiles) {
  for (var i = 0; i < listOfFiles.length; i++) {
    $('body').append('<div id="chart' + i + '" style="width: 49%; height: 400px; margin: 0 auto;float:left;"></div>');
    $.get(listOfFiles[i], function(csv) {
      $('#chart' + i).highcharts({
        .....
      });
    });
  }
});

В идеале у вас должен быть API для извлечения данных из базы данных вместо использования файлов.

Answer 2

Вместо повторяющегося кода вы можете заключить свой общий код в function и вызывать, когда вам нужно отрендерить диаграмму с данными.

renderCharts функция принимает данные CSV и значение идентификатора.

function renderCharts(data,key){
 $('#' + key).highcharts({
               data: {
                  csv: data
               },
               title: {
                  text: 'Twitter (@xxx)'
               },
               yAxis: {
                  allowDecimals: false,
                  title: {
                     text: 'Users'
                  }
               },
               series: [{
                  visible: true
               }, {
                  visible: false
               }],
               plotOptions: {
                  line: {
                     dataLabels: {
                        enabled: true
      }
      }
}})
};


$(document).ready(function() {
   var ids = ['export_xxx_.csv','export_xxxxyy.csv','export_xxxxyyddd.csv'];
   var promises = [];
  ids.forEach(function(id){
      promises.push($.get(id));
  });

  $.when(promises).then(function(values){
    values.forEach(function(value){
      renderCharts(value,'xxx');
   })
  });
}