將多個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數據文件如下。

數據1.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 ， data1數組未完全設置：ajax調用未完成。

您需要在$.get()調用的末尾移動drawChart調用。

這是工作代碼：

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