将多个 csv 文件中的时间戳数据添加到 highchart

Question

我正在尝试从 2 个 csv 文件中添加数据，这些文件的时间戳数据如下：9/30/2015 6:39:14 PM,20.709217。 我正在尝试从文件中读取这些值并将字符串转换为 highcharts 接受的日期时间格式。

对于每个文件，我都会将此转换后的数据添加到我推送到图表的数据数组中。

它给出以下错误：Invalid value for <path> attribute d="M 687.5 "

这是我正在尝试的代码：jsfiddle

我的 csv 数据文件如下。

Data1.csv

9/30/2015 6:39:14 PM,20.709217
9/29/2015 6:38:16 PM,32.215775
9/28/2015 6:38:16 PM,32.215775

Data2.csv

9/30/2015 6:39:14 PM,24.709217
9/29/2015 6:38:16 PM,18.012775
9/28/2015 6:38:16 PM,33.245775

请帮我解决这个问题。

Answer 1

$.get()是异步的，所以当你调用drawChart时，data1array没有完全设置好：ajax调用没有结束。

您需要将drawChartcall 移到$.get() 调用的末尾。

这是工作代码：

var options1 = {
  chart: {
    renderTo: 'container'
  },
  title: {
    text: ''
  },
  xAxis: {
    title: {
      text: 'Select on Parameters to change data in chart.'
    },
  },
  vAxis: {
    title: {
      text: ''
    },
  },
  tooltip: {
    enabled: true,
    shared: true
  },
  series: []
};

var drawChart = function(data, type, name, color) {
  var newSeriesData = {
    name: name,
    type: type,
    data: data,
    color: color
  };

  options1.series.push(newSeriesData);

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


var data1 = [
    []
  ],
  data2 = [
    []
  ];

$.get('data1.csv', function(csv) {
  var lines = csv.trim().split('\n');
  console.log("CSV: ", csv);

  $.each(lines, function(lineNo, line) {
    var items = line.split(',');
    console.log('Item1:', items[0])
    if ((line !== " ")) {

      var datetime = new Date(items[0]);
      console.log("Datetime variable: ", datetime);
      var value = parseFloat(items[1]);

      var year = datetime.getFullYear();
      var month = datetime.getUTCMonth();
      var day = datetime.getDay();
      var hour = datetime.getHours();
      var min = datetime.getMinutes();

      var thisDate = Date.UTC(year, month, day, hour, min);
      console.log("Date: ", thisDate);
      console.log("Value: ", value);
      //                        console.log("Date Generated: ",thisDate);
      data1.push([thisDate, value]);

    }
  });

  $.each(lines, function(lineNo, line) {
    var items = line.split(',');
    console.log('Item1:', items[0])
    if ((line !== " ")) {

      var datetime = new Date(items[0]);
      console.log("Datetime variable: ", datetime);
      var value = parseFloat(items[1]);

      var year = datetime.getFullYear();
      var month = datetime.getUTCMonth();
      var day = datetime.getDay();
      var hour = datetime.getHours();
      var min = datetime.getMinutes();

      var thisDate = Date.UTC(year, month, day, hour, min);
      console.log("Date: ", thisDate);
      console.log("Value: ", value);
      //                        console.log("Date Generated: ",thisDate);
      data1.push([thisDate, value]);

    }
  });
  console.log("Data1 Array: ", data1);
  drawChart(data1, 'line', 'DC Voltage (V)', 'red');
});

这是控制台中的输出：

CSV:  9/30/2015 6:39:14 PM,20.709217
9/29/2015 6:38:16 PM,32.215775
9/28/2015 6:38:16 PM,32.215775
Item1: 9/30/2015 6:39:14 PM
Datetime variable:  Wed Sep 30 2015 18:39:14 GMT+0200 (Paris, Madrid (heure d’été))
   "Datetime variable: "
   [date] Wed Sep 30 2015 18:39:14 GMT+0200 (Paris, Madrid (heure d’été))

Date:  1441305540000
Value:  20.709217
Item1: 9/29/2015 6:38:16 PM
Datetime variable:  Tue Sep 29 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))
   "Datetime variable: "
   [date] Tue Sep 29 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))

Date:  1441219080000
Value:  32.215775
Item1: 9/28/2015 6:38:16 PM
Datetime variable:  Mon Sep 28 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))
   "Datetime variable: "
   [date] Mon Sep 28 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))

Date:  1441132680000
Value:  32.215775
Item1: 9/30/2015 6:39:14 PM
Datetime variable:  Wed Sep 30 2015 18:39:14 GMT+0200 (Paris, Madrid (heure d’été))
   "Datetime variable: "
   [date] Wed Sep 30 2015 18:39:14 GMT+0200 (Paris, Madrid (heure d’été))

Date:  1441305540000
Value:  20.709217
Item1: 9/29/2015 6:38:16 PM
Datetime variable:  Tue Sep 29 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))
   "Datetime variable: "
   [date] Tue Sep 29 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))

Date:  1441219080000
Value:  32.215775
Item1: 9/28/2015 6:38:16 PM
Datetime variable:  Mon Sep 28 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))
   "Datetime variable: "
   [date] Mon Sep 28 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))

Date:  1441132680000
Value:  32.215775
Data1 Array:  ,1441305540000,20.709217,1441219080000,32.215775,1441132680000,32.215775,1441305540000,20.709217,1441219080000,32.215775,1441132680000,32.215775
   "Data1 Array: "
   [
      0: [ ],
      1: [ ],
      2: [ ],
      3: [ ],
      4: [ ],
      5: [ ],
      6: [ ],
      length: 7
   ]

Highcharts error #15: www.highcharts.com/errors/15
Highcharts error #15: www.highcharts.com/errors/15
Highcharts error #15: www.highcharts.com/errors/15
Highcharts error #15: www.highcharts.com/errors/15