如何在highcharts中加载多个CSV文件？

我正在尝试在高级图表中绘制一个图表，包含来自2个CSV文件的变量。 我根据这些示例进行了尝试： 在一个图表中加载多个csv文件（正确的顺序），并从2个不同的csv文件加载高图中的数据，但我无法使其工作，网页中没有任何内容，它只是空白。 如果您在chrome中看到错误，则抛出“Uncaught SyntaxError：意外的输入结束”。

我真的很赞赏你能给我的任何帮助。 这是我使用的代码和两个示例文件：

           $(document).ready(function() { var c = []; var d = []; var e = []; var f = []; $.get('test1.csv', function (data1) { // Split the lines var lines = data1.split('\n'); // Iterate over the lines and add categories or series $.each(lines, function (lineNo, line) { var items = line.split(','); c.push(items[0]); d.push(parseFloat(items[1])); // }); $.get('test2.csv', function (data2) { // Split the lines var lines = data2.split('\n'); // Iterate over the lines and add categories or series $.each(lines, function (lineNo, line) { var items = line.split(','); e.push(items[2]); f.push(parseFloat(items[3])); }); var chart = new Highcharts.Chart(options); },'Text'); var options = { chart: { renderTo: 'chart', zoomType: 'xy', }, title: { text: '' }, credits: { enabled: true }, xAxis: { title: { text: 'Fecha' }, categories: e }, yAxis: { title: { text: 'µg/m³' } }, series: [{ name: 'Puren', data: d }, { name: 'Ferroviario', data: f }], }; });     
 
   

test1.csv

 Date, Puren 18-07-16 0:00,152 18-07-16 2:00,175 18-07-16 4:00,188 18-07-16 6:00,209 18-07-16 8:00,241 18-07-16 10:00,254 18-07-16 12:00,262 18-07-16 14:00,267 18-07-16 16:00,290 18-07-16 18:00,324 18-07-16 20:00,341 18-07-16 22:00,343 19-07-16 0:00,344 19-07-16 2:00,346 19-07-16 4:00,348 19-07-16 6:00,353 19-07-16 8:00,362 19-07-16 10:00,374 19-07-16 12:00,375 19-07-16 14:00,373 19-07-16 16:00,376 19-07-16 18:00,379 19-07-16 20:00,376 19-07-16 22:00,367 21-07-16 0:00,347 21-07-16 2:00,322 21-07-16 4:00,306 21-07-16 6:00,278 21-07-16 8:00,237 21-07-16 10:00,216 21-07-16 12:00,204 21-07-16 14:00,198 21-07-16 16:00,174 21-07-16 18:00,140 21-07-16 20:00,123 21-07-16 22:00,120 

test2.csv

 Date, Ferroviario 19-07-16 0:00,172 19-07-16 2:00,171 19-07-16 4:00,169 19-07-16 6:00,169 19-07-16 8:00,169 19-07-16 10:00,165 19-07-16 12:00,154 19-07-16 14:00,121 19-07-16 16:00,82 19-07-16 18:00,67 19-07-16 20:00,63 19-07-16 22:00,59 21-07-16 0:00,56 21-07-16 2:00,53 21-07-16 4:00,50 21-07-16 6:00,44 21-07-16 8:00,32 21-07-16 10:00,24 21-07-16 12:00,21 21-07-16 14:00,20 21-07-16 16:00,17 21-07-16 18:00,14 21-07-16 20:00,13 21-07-16 22:00,12 22-07-16 0:00,11 22-07-16 2:00,11 22-07-16 4:00,11 22-07-16 6:00,9 22-07-16 8:00,9 22-07-16 10:00,9 22-07-16 12:00,9 22-07-16 14:00,9 22-07-16 16:00,9 22-07-16 18:00,9 22-07-16 20:00,9 22-07-16 22:00,9 

Answer 1

最好的方法是装箱你自己的CSV解析器。 示例如下：

 Array.prototype.concatAll = function() { var results = []; this.forEach(function(subArray) { results.push.apply(results, subArray); }); return results; }; function csvToData(csv) { return csv.split('\n') .splice(1) .map((line) => line .split(',') .map((val, i) => { if (i === 0) { const a = val .split(' ') .map((s, i) => i === 0 ? s.split('-') : s.split(':')).concatAll().map(s => Number(s)) return Date.UTC(2000 + a[2], a[1], a[0], a[3], a[4]) } else { return Number(val) } }) ) } const test1_csv = `Date, Puren 18-07-16 0:00,152 18-07-16 2:00,175 18-07-16 4:00,188 18-07-16 6:00,209 18-07-16 8:00,241 18-07-16 10:00,254 18-07-16 12:00,262 18-07-16 14:00,267 18-07-16 16:00,290 18-07-16 18:00,324 18-07-16 20:00,341 18-07-16 22:00,343 19-07-16 0:00,344 19-07-16 2:00,346 19-07-16 4:00,348 19-07-16 6:00,353 19-07-16 8:00,362 19-07-16 10:00,374 19-07-16 12:00,375 19-07-16 14:00,373 19-07-16 16:00,376 19-07-16 18:00,379 19-07-16 20:00,376 19-07-16 22:00,367 21-07-16 0:00,347 21-07-16 2:00,322 21-07-16 4:00,306 21-07-16 6:00,278 21-07-16 8:00,237 21-07-16 10:00,216 21-07-16 12:00,204 21-07-16 14:00,198 21-07-16 16:00,174 21-07-16 18:00,140 21-07-16 20:00,123 21-07-16 22:00,120` const test2_csv = `Date, Ferroviario 19-07-16 0:00,172 19-07-16 2:00,171 19-07-16 4:00,169 19-07-16 6:00,169 19-07-16 8:00,169 19-07-16 10:00,165 19-07-16 12:00,154 19-07-16 14:00,121 19-07-16 16:00,82 19-07-16 18:00,67 19-07-16 20:00,63 19-07-16 22:00,59 21-07-16 0:00,56 21-07-16 2:00,53 21-07-16 4:00,50 21-07-16 6:00,44 21-07-16 8:00,32 21-07-16 10:00,24 21-07-16 12:00,21 21-07-16 14:00,20 21-07-16 16:00,17 21-07-16 18:00,14 21-07-16 20:00,13 21-07-16 22:00,12 22-07-16 0:00,11 22-07-16 2:00,11 22-07-16 4:00,11 22-07-16 6:00,9 22-07-16 8:00,9 22-07-16 10:00,9 22-07-16 12:00,9 22-07-16 14:00,9 22-07-16 16:00,9 22-07-16 18:00,9 22-07-16 20:00,9 22-07-16 22:00,9` const data1 = csvToData(test1_csv) const data2 = csvToData(test2_csv) const mergedData = [...data1, ...data2] const options = { xAxis: { type: 'datetime' }, series: [{ data: mergedData, type: 'column' }] } const chart = Highcharts.chart('container', options); console.log(data1, data2, mergedData) 

实例： https ： //jsfiddle.net/a9zocb40/

[编辑]实时数据

 const options = { chart: { events: { load: function() { const chart = this const data1 = csvToData(test1_csv) const data2 = csvToData(test2_csv) const mergedData = [...data1, ...data2].sort((a, b) => a[0] - b[0]) console.log(data1, data2, mergedData) chart.series[0].setData(mergedData) } } }, xAxis: { type: 'datetime' }, series: [{ data: [], type: 'column' }] } const chart = Highcharts.chart('container', options); 

实例： https ： //jsfiddle.net/g8ocqwwr/