我正在尝试在高级图表中创建一个图表，其中包含来自2个CSV文件的变量。我根据这些示例进行了尝试：load multiple csv files (correct order) in one chart和load data in highcharts from 2 different csv files但是我无法使其工作，网页中没有任何内容，它只是空白。如果您在chrome中看到错误，则抛出“Uncaught SyntaxError：意外的输入结束”。
我真的很赞赏你能给我的任何帮助。这是我正在使用的代码和两个示例文件：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2 csv_v3</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/data.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(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
}],
};
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="chart" style="width: 900px; height: 500px; margin: 0 auto"> </div>
</body>
</html>
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
答案 0 :(得分：2)
最好的方法是装箱你自己的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);