使用highcharts从CSV绘制不规则时间数据

时间：2016-01-31 18:12:09

标签： javascript html ajax highcharts

如果这是一个愚蠢的问题，我很抱歉，但我没有网络开发的实际经验，我也找不到复制/粘贴的好例子。

我正在尝试基于CSV文件生成一个简单的图形，它看起来像这样（unix时间戳，人类可读日期，T1，T2，T3）并且具有不规则的间隔

temperatures.dat 

1454251326, Sun Jan 31 15:42:06 2016, 21.44, 21.38, 21.06 
1454251338, Sun Jan 31 15:42:18 2016, 21.44, 21.38, 21.06 
1454251351, Sun Jan 31 15:42:31 2016, 21.44, 21.38, 21.00 
1454251363, Sun Jan 31 15:42:43 2016, 21.44, 21.38, 21.00 
1454251376, Sun Jan 31 15:42:56 2016, 21.44, 21.38, 21.06 
1454251388, Sun Jan 31 15:43:08 2016, 21.44, 21.38, 21.00 
1454251401, Sun Jan 31 15:43:21 2016, 21.44, 21.38, 21.00 
1454251413, Sun Jan 31 15:43:33 2016, 21.44, 21.31, 21.00 
1454251426, Sun Jan 31 15:43:46 2016, 21.44, 21.38, 21.00 
1454251438, Sun Jan 31 15:43:58 2016, 21.44, 21.31, 21.00 
1454251451, Sun Jan 31 15:44:11 2016, 21.44, 21.31, 21.00 
1454251463, Sun Jan 31 15:44:23 2016, 21.44, 21.31, 21.00 
1454251476, Sun Jan 31 15:44:36 2016, 21.44, 21.31, 21.00 
1454251488, Sun Jan 31 15:44:48 2016, 21.38, 21.31, 21.00 
1454251501, Sun Jan 31 15:45:01 2016, 21.44, 21.31, 20.94 
1454251513, Sun Jan 31 15:45:13 2016, 21.44, 21.31, 21.00 
1454251526, Sun Jan 31 15:45:26 2016, 21.44, 21.31, 21.00 
1454251538, Sun Jan 31 15:45:38 2016, 21.38, 21.31, 21.00 
1454251551, Sun Jan 31 15:45:51 2016, 21.38, 21.31, 21.00 
1454251563, Sun Jan 31 15:46:03 2016, 21.38, 21.31, 21.00 
1454251575, Sun Jan 31 15:46:15 2016, 21.38, 21.31, 21.00 
1454251588, Sun Jan 31 15:46:28 2016, 21.38, 21.31, 20.94 
1454251600, Sun Jan 31 15:46:40 2016, 21.38, 21.31, 20.94 
1454251613, Sun Jan 31 15:46:53 2016, 21.38, 21.31, 20.94 
1454251625, Sun Jan 31 15:47:05 2016, 21.38, 21.31, 20.94 
1454251638, Sun Jan 31 15:47:18 2016, 21.38, 21.31, 20.94 
1454251650, Sun Jan 31 15:47:30 2016, 21.31, 21.31, 20.94 
1454251663, Sun Jan 31 15:47:43 2016, 21.31, 21.31, 20.94 
1454251675, Sun Jan 31 15:47:55 2016, 21.31, 21.25, 20.94 
1454251688, Sun Jan 31 15:48:08 2016, 21.31, 21.25, 20.94 
1454251700, Sun Jan 31 15:48:20 2016, 21.31, 21.19, 20.88 
1454251713, Sun Jan 31 15:48:33 2016, 21.31, 21.25, 20.88 
1454251725, Sun Jan 31 15:48:45 2016, 21.31, 21.19, 20.94 
1454251738, Sun Jan 31 15:48:58 2016, 21.31, 21.19, 20.88 
1454251750, Sun Jan 31 15:49:10 2016, 21.31, 21.19, 20.88 
1454251763, Sun Jan 31 15:49:23 2016, 21.31, 21.25, 20.88 
1454251775, Sun Jan 31 15:49:35 2016, 21.31, 21.19, 20.88 
1454251788, Sun Jan 31 15:49:48 2016, 21.31, 21.25, 20.88 
1454251800, Sun Jan 31 15:50:00 2016, 21.31, 21.19, 20.88 
1454251813, Sun Jan 31 15:50:13 2016, 21.25, 21.19, 20.88 
1454251825, Sun Jan 31 15:50:25 2016, 21.25, 21.19, 20.88 
1454251838, Sun Jan 31 15:50:38 2016, 21.25, 21.19, 20.88 
1454251850, Sun Jan 31 15:50:50 2016, 21.25, 21.19, 20.88 
1454251863, Sun Jan 31 15:51:03 2016, 21.25, 21.19, 20.88 
1454251875, Sun Jan 31 15:51:15 2016, 21.25, 21.19, 20.88

temperatures.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                      <html>
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var c = [];
        var t1 = [];
        var t2 = [];
        var t3 = [];
        var options = {
                chart: {
                    renderTo: 'chart',
                    defaultSeriesType: 'line',
                    zoomType: 'x'
                },
                title: {
                    text: 'temperature readings from Rasberry Pi'
                },
                xAxis: {
                    title: { text: 'Date Measurement' },
                    type: 'datetime',
                    series: [{ data: c}]
                },
                yAxis: { title: { text: 'Temperature (C)' }, ordinal: false },
                series: [{ data: t1, name : 'sensor A'}, { data: t2, name : 'sensor B'}, { data: t3, name : 'sensor C'}]
        };

        var jqxhr = $.get('temperatures.dat', function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                val1=parseFloat(items[2])
                val2=parseFloat(items[3])
                val3=parseFloat(items[4])
                if(!isNaN(val1) && !isNaN(val2) && !isNaN(val3)) {
                  c.push(parseInt(items[0]*1000));
                  t1.push(val1);
                  t2.push(val2);
                  t3.push(val3);
                }
            })
            var chart = new Highcharts.Chart(options);

        });
    });
</script>
   </head>
   <body>
        <div id="chart" style="width: 600px; height: 400px; margin: 0 auto"></div>
   </body>
</html>

生成以下图

Output of the above code[1]

然而，因为它，它只是不识别时间戳，只是在行号，0,1,2，......之后的地块上绘制......

如果有人能指出我如何修改代码的正确方向，我将非常感激！

（更新

after adding categories and new Date

1 个答案:

答案 0 :(得分：1)

回答我自己的问题，基于另一个例子我发现我设法构建了这个工作代码。重要的一点是在每个系列中都有数据对（x，y），而不是单独的x和y系列。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // Define and initialize "options"
    options = {
       chart: {
            renderTo: 'container',
            type: 'line',
            zoomType: 'x'
       },
       title: { text: 'temperature measurements' },
       xAxis: { type: 'datetime' },
       yAxis: { title: { text: 'Temperature (C)' } },
       series: []
    };

    // Read datafile
    $.get('temperatures.dat', function(data) {
        var series1 = { data: [], name: 'sensor A' };
        var series2 = { data: [], name: 'sensor B' };
        var series3 = { data: [], name: 'sensor C' };
        // Split the lines
        var lines = data.split('\n');
        // Slit each line into items separated by commas
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');
            // Add 3600 for timezone offset and multiply by 1000 to have time in ms
            t=(parseInt(items[0])+3600)*1000;
            val1=parseFloat(items[2]);
            val2=parseFloat(items[3]);
            val3=parseFloat(items[4]);
            // Add to series if conversion was successful
            if(!isNaN(val1)) series1.data.push([t, val1]);
            if(!isNaN(val2)) series2.data.push([t, val2]);
            if(!isNaN(val3)) series3.data.push([t, val3]);
        });

        // Push the completed series
        options.series.push(series1,series2,series3);
        // Create the plot
        new Highcharts.Chart(options);
    });
});
</script>
</head>
   <body>
        <div id="container" style="width: 800px; height: 500px; margin: 0 auto"></div>
   </body>
</html>
相关问题
最新问题