Highcharts / highstocks来自CSV文件的Javascript

时间:2015-08-20 13:56:12

标签: javascript csv highcharts highstock

我想要一个可以从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 highstockHighchart from CSV file with JavaScript。非常感谢提前!

1 个答案:

答案 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);

            });

          });