如何在highcharts中加载更多的CSV文件？ [英] How to load more than on CSV file in highcharts?
本文介绍了如何在highcharts中加载更多的CSV文件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在highcharts做一个情节，结合来自2个CSV文件的变量。我根据这些示例进行了尝试：加载多个csv文件（正确顺序）和在一个图表中加载数据highcharts从2个不同的csv文件，但我不能使它的工作，没有出现在网页，它只是空白。如果您在chrome中看到错误，请抛出未捕获的语法错误：意外的输入结束。
I'm trying to make a plot in highcharts, incorporating variables from 2 CSV files. I made an attempt based on these examples: load multiple csv files (correct order) in one chart and load data in highcharts from 2 different csv files but I can't make it work, nothing appears in the webpage, it's just blank. If you see the error in chrome, throws "Uncaught SyntaxError: Unexpected end of input".
我真的很感谢你能给我的任何帮助。这里是我使用的代码和两个示例文件：
I would really apreciate any help you could give me. Here's the code and two sample files I was using:
<!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
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
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
推荐答案
最好的方法是使用自己的CSV解析器。示例如下：
Best way would be crating your own CSV parser. Example below:
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/
FOR LIVE DATA
FOR LIVE DATA
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);
Live example：
https://jsfiddle.net/g8ocqwwr/
Live example: https://jsfiddle.net/g8ocqwwr/
这篇关于如何在highcharts中加载更多的CSV文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
