我想要一个可以从CSV文件中绘制多个流的highstocks图表。我的csv数据如下:
https://github.jspm.io/jmcriffey/bower-traceur@0.0.87.js
https://github.jspm.io/jmcriffey/bower-traceur@0.0.87/traceur.js
我的index.html中的Javascript:
TIMESTAMP,DATA
2013-07-25 17:52:13.490,98425702
2013-07-25 17:52:34.840,382307
2013-07-25 17:52:55.900,380769
2013-07-25 17:54:37.380,500000
2013-07-25 17:54:47.910,98360155
2013-07-25 17:54:58.440,430000
2013-07-25 17:55:08.970,282307
2013-07-26 19:46:30.950,116923
使用:
<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/stock/highstock.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/data.js"></script>
<script type="text/javascript">
// Create the chart
$(function() {
var magx = [];
$.get('magx-11.csv', function(csv1) {
var lines = csv1.split('\n');
for (i=0; i<lines.length; i++) {
var elements = lines.split(',');
for (j=0; j<lines.length; j++) {
magx.push([ elements[j] ])
}
}
console.log(magx);
});
$('#container').highcharts('StockChart', {
xAxis: {
type: 'datetime'
},
title: {
text: 'Data'
},
series: [{
name: 'Mag X',
data: magx,
}]
});
});
</script>
所以,我首先想一下如何解析数据。我已经看到有关分割新行的各种参考,然后是','分隔符。但是从日志记录输出来看,我认为数据不会被传递到下一个我希望得到帮助的函数。
这也没什么影响:
<body>
<div id="container" style="width: 1200px; height: 400px; margin: 0 auto"</div>
</body>
我希望能够为多个csv文件扩展它。
(我现在忽略那里不正确的日期时间处理)。
我已经看过:Reading data from CSV with highstock和Highchart from CSV file with JavaScript。非常感谢提前!
答案 0 :(得分:0)
Trick是调查JSON格式,然后调查Data.parse()格式。文件呃?
还有“Highcharts错误#15:http://www.highcharts.com/errors/15 highstock.js:13:195“。我的数据是按日期排序的,还不够好吗?
现在需要将此转换为每个图表的多个csv。
$(function() {
var magx = [];
$.get('stuff.csv', function(csv1) {
var lines = csv1.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
if(lineNo > 0) {
var ds1 = items[0].split(' ');
magx.push( [ Date.parse(ds1[0] + "T" + ds1[1]) , parseFloat(items[1]) ] );
};
});
var options = {
xAxis: {
type: 'datetime'
},
exporting: {
enabled: true
},
series: [{
name: 'Data 1',
data: magx
}]
};
var chart = $('#container').highcharts('StockChart', options);
});
});