將時間戳數據從多個csv文件添加到高圖

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,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