Question

好的大家好。我设计了我的HighStock作品 CSV文件。我可以给我的系列时间和1行。我想要从数据中获取2行。有任何想法吗？将来我希望获得2位小数，例如25,01。你对此有什么想法吗？

在CSV中有秒，数据和数据。它打印1分钟是的，我来自芬兰学生，我的代码糟透了...... :)

数据： 以秒为单位的时间，价值，价值

0,25,23
60,25,23
120,25,23
....
14220,24,22
14280,24,22
14340,24,22

我的HC.htm中的Javascript :(它是索引）

<!DOCTYPE HTML> 
<html>          
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>Hannun virtamittaus</title>  

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <style type="text/css"> 
                                                                                                                            ${demo.css}
        </style> 
        <script type="text/javascript"> 
function getDataFilename(str){
    point = str.lastIndexOf("file=")+4;

    tempString = str.substring(point+1,str.length)
    if (tempString.indexOf("&") == -1){
    return(tempString);
    }
    else{
        return tempString.substring(0,tempString.indexOf("&"));
    }

}

query  = window.location.search;

var dataFilePath = "/data/"+getDataFilename(query);

$(function () {
    var chart;
    $(document).ready(function() {

        // define the options
        var options = {

            chart: {
                renderTo: 'container',
                zoomType: 'x',
                spacingRight: 5
            },

            title: {
                text: 'Arduinolla mitatut virran arvot'
            },

            subtitle: {
                text: 'Zoomaa haluttu luenta alue'
            },

            xAxis: {
                type: 'datetime',
                maxZoom: 2 * 4000000
            },

            yAxis: {
                title: {
                    text: 'Virran arvot 0-250A'
                },
                min: 0,
                startOnTick: false,
                showFirstLabel: false
            },

            legend: {
                enabled: false
            },

            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +': '+ this.y;
                }
            },

            plotOptions: {
                series: {
                    cursor: 'pointer',
                    lineWidth: 1.0,
                    point: {
                        events: {
                            click: function() {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: this.pageX,
                                        y: this.pageY
                                    },
                                    headingText: this.series.name,
                                    maincontentText: Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +':<br/> '+
                                        this.y,
                                    width: 100
                                });
                            }
                        }
                    },
                }
            },

            series: [{
                name: 'Op1',
                marker: {
                    radius: 2
                }
            }]
        };


        // Load data asynchronously using jQuery. On success, add the data
        // to the options and initiate the chart.
        //  http://api.jquery.com/jQuery.get/

        jQuery.get(dataFilePath, null, function(csv, state, xhr) {
            var lines = [],
                date,

                // set up the two data series
                lightLevels = [];

            // inconsistency
            if (typeof csv !== 'string') {
                csv = xhr.responseText;
            }

            // split the data return into lines and parse them
            csv = csv.split(/\n/g);
            jQuery.each(csv, function(i, line) {

                // all data lines start with a double quote
                line = line.split(',');
                date = parseInt(line[0], 10)*1400;

                lightLevels.push([
                    date,
                    parseInt(line[1], 10)
                ]);

            });

            options.series[0].data = lightLevels;

            chart = new Highcharts.Chart(options);
        });
    });

});
        </script>
    </head>
    <body>
<script src="https://code.highcharts.com/stock/4.2.4/highstock.js"></script>
<script src="https://code.highcharts.com/stock/4.2.4/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 155px"></div>
    </body>
</html>

Answer 1

您需要设置一系列对象。

系列：

series: [{
            name: 'Op1',
            marker: {
                radius: 2
            }
 },{
           name: 'Op2'
 }]

分析器

jQuery.get(dataFilePath, null, function(csv, state, xhr) {
            var lines = [],
                date,

                // set up the two data series
                lightLevels = [];
                topLevels = [];

            // inconsistency
            if (typeof csv !== 'string') {
                csv = xhr.responseText;
            }

            // split the data return into lines and parse them
            csv = csv.split(/\n/g);
            jQuery.each(csv, function(i, line) {

                // all data lines start with a double quote
                line = line.split(',');
                date = parseInt(line[0], 10)*1400;

                lightLevels.push([
                    date,
                    parseInt(line[1], 10)
                ]);

                topLevels.push([
                    date,
                    parseInt(line[2], 10)
                ]);

            });

            options.series[0].data = lightLevels;
            options.series[1].data = topLevels;

            chart = new Highcharts.Chart(options);
        });

HighStock CSV系列的多个系列（Arduino Based＆amp; JavaScript）

1 个答案: