动态生成javascript和html块

在我的网站中，我目前使用3个csv文件，这些文件由highcharts使用以下javascript呈现：

$（文档）.ready（函数（）{
$.get（'export_xxxx.csv'，函数（csv）{
$（'#xxx'）。高图({
数据：{
csv:csv
},
标题：{
文字：“推特（@xxxxx）”
},
亚克斯：{
allowDecimals:false，
标题：{
文本：“用户”
}
},
系列：[{
可见：正确
}, {
可见：假
}],
打印选项：{
行：{
数据标签：{
已启用：true
}
} 
},
});
});
});
$（文档）.ready（函数（）{
$.get（'exportxxxxyy.csv'，函数（csv）{
$（'#xxx'）。高图({
数据：{
csv:csv
},
标题：{
文本：“推特（@xxxx）”
},
亚克斯：{
allowDecimals:false，
标题：{
文本：“用户”
}
},
系列：[{
可见：正确
}, {
可见：假
}],
打印选项：{
行：{
数据标签：{
已启用：true
}
}
},
});
});
});
$（文档）.ready（函数（）{
$.get（'export\u xxx\u.csv'，函数（csv）{
$（'#xxx'）。高图({
数据：{
csv:csv
},
标题：{
文字：“推特（@xxx）”
},
亚克斯：{
allowDecimals:false，
标题：{
文本：“用户”
}
},
系列：[{
可见：正确
}, {
可见：假
}],
打印选项：{
行：{
数据标签：{
已启用：true
}
}
},
});
});
});代替重复代码，您可以将常用代码包装到
函数中，并在需要使用数据呈现图表时调用

renderCharts
函数接受csv数据和id值

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

假设您的Web服务器对文件列表给出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({
        .....
      });
    });
  }
});

$.get（'/data'，函数（listOfFiles）{
对于（var i=0；i

不过，理想情况下，您应该有一个API从数据库检索数据
数据库而不是使用文件