在高级图表中解析多个类别的CSV

Question

我调用一个web服务来获取如下数据：

Timestamp,Speed1,Speed2
10/5/2015 12:00:00 AM,86,46.2
10/5/2015 1:00:00 AM,78,51
10/5/2015 2:00:00 AM,77,52
10/5/2015 3:00:00 AM,80,49
10/5/2015 4:00:00 AM,112,42
10/5/2015 5:00:00 AM,79,50

我想制作一个有两个类别的线条图，每一个“速度”，在x轴上的时间和y轴上的速度。我在解析CSV以生成一个高图表系列时遇到了困难。目前，当我这样做时，我可以看到一个类别：

 $.get('GetSummaries.asmx/GetSummaryCsv', { }, function (csv) {

            var speedSeries = [];

            var lines = csv.trim().split('\n');
            $.each(lines, function (lineNo, line) {
                var items = line.split(',');
                if ((lineNo !== 0) && (line != "")) {
                    var x = new Date(items[0]),
                        speed1 = parseInt(items[1]),
                        speed2 = parseInt(items[2]);

                    var year = x.getFullYear();
                    var month = x.getMonth();
                    var day = x.getDate();
                    var hour = x.getHours();
                    var min = x.getMinutes();
                    var thisDate = Date.UTC(year, month, day, hour, min);


                    speedSeries.push([thisDate, speed1, speed2]);

                }
            });

            options.series.push({
                data: speedSeries,
                type: 'line',
                color: 'DarkBlue'
            });

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

如何创建数组以生成两行图--每个速度类别一条？

Answer 1

你需要两个系列来做，

​

var csv = "Timestamp,Speed1,Speed2\n"+
"10/5/2015 12:00:00 AM,86,46.2\n"+
"10/5/2015 1:00:00 AM,78,51\n"+
"10/5/2015 2:00:00 AM,77,52\n"+
"10/5/2015 3:00:00 AM,80,49\n"+
"10/5/2015 4:00:00 AM,112,42\n"+
"10/5/2015 5:00:00 AM,79,50\n";    

var speedSeries = [[],[]];
var lines = csv.trim().split('\n');
$.each(lines, function (lineNo, line) {
  var items = line.split(',');
  if ((lineNo !== 0) && (line != "")) {
    var x = new Date(items[0]),
        speed1 = parseInt(items[1]),
        speed2 = parseInt(items[2]);

    var year = x.getFullYear();
    var month = x.getMonth();
    var day = x.getDate();
    var hour = x.getHours();
    var min = x.getMinutes();
    var thisDate = Date.UTC(year, month, day, hour, min);


    speedSeries[0].push([thisDate, speed1]);
    speedSeries[1].push([thisDate, speed2]);

  }
});

var options = {series:[],chart:{renderTo:"chart"}, xAxis: {type: 'datetime'}};

options.series.push({
  data: speedSeries[0],
  type: 'line',
  color: 'DarkBlue',
  name:"Speed 1"
});
options.series.push({
  data: speedSeries[1],
  type: 'line',
  color: 'Red',
  name:"Speed 2"
});

var chart = new Highcharts.Chart(options);

#chart{
    width: 500px;
    height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart"></div>

​