Question

在我的网站上，我当前正在使用3个csv文件，这些文件是由highcharts使用以下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>

我的愿望是用highcharts的javascript制作HTML页面，以处理我网站的DocumentRoot中的csv。

例如，如果我放置10个csv文件，则通用HTML文件将在同一页面上显示10个不同的图表，而无需手动编辑HTML页面并添加javascript。动态生成，具有多少个csv文件的功能。

感谢您的帮助，

Answer 1

您可以将通用代码包装到function中，以代替重复代码，并在需要使用数据呈现图表时调用。

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

Answer 2

假设您的网络服务器对文件列表给出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可以从数据库而不使用文件。

即时生成javascript和html块

2 个答案: