將CSV webservice轉換爲多年Highcharts線圖

我正在請求一個web服務，該服務使用這樣的CSV文件進行響應（以及過去幾年的更多月度數據）。非常重要，我是行的第一個和最後一個資料片（又名日期和值）：將CSV webservice轉換爲多年Highcharts線圖

2010/01/01,51.67074582499006,13.789093928493081,-0.0010074468085106377 
2010/02/01,51.67074582499006,13.789093928493081,0.0024117021276595747 
2010/03/01,51.67074582499006,13.789093928493081,0.026550000000000004 
2010/04/01,51.67074582499006,13.789093928493081,0.08252659574468087 
2010/05/01,51.67074582499006,13.789093928493081,0.12837446808510639 
2010/06/01,51.67074582499006,13.789093928493081,0.140618085106383 
2010/07/01,51.67074582499006,13.789093928493081,0.0668787234042553 
2010/08/01,51.67074582499006,13.789093928493081,0.10335744680851064 
2010/09/01,51.67074582499006,13.789093928493081,0.08095000000000001 
2010/10/01,51.67074582499006,13.789093928493081,0.0400159574468085 
2010/11/01,51.67074582499006,13.789093928493081,0.004214893617021277 
2010/12/01,51.67074582499006,13.789093928493081,-0.0018680851063829788 
2011/01/01,51.67074582499006,13.789093928493081,0.0011914893617021279 
2011/02/01,51.67074582499006,13.789093928493081,0.003752127659574468 
2011/03/01,51.67074582499006,13.789093928493081,0.027225531914893623

有了這些信息，我想建立一個Highcharts圖形，顯示每一年的一個單獨的行。它應該是這樣的：

我現在的版本中增加的所有數據到一個長行 - 這是很好的，但不會使年間可比的值：

function processData(allText) 
{ 
    var allTextLines = allText.split(/\r\n|\n/); 
    var lines = []; var n = 0; var data = []; var dateValue = []; 

    for (var i=1; i<allText.length; i++) 
    { 
     if (allTextLines[i]) 
     { 
      if ((allTextLines[i].substring(0,2) == "19") || (allTextLines[i].substring(0,2) == "20")) 
      { 
       dateValue = allTextLines[i].split(","); 

       // everything will be concatenated into one single line 
       if(Number.isFinite(parseFloat(dateValue[3]))) 
       { 
        data[n] = [new Date(dateValue[0]).getTime(), parseFloat(dateValue[3])]; 
       } 

       n++;         
      } 
     }     
    } 

    return data; 
}

現在，我需要的是一個結果，看起來像這樣：

series: 
[{ 
    name: "2010", 
    data: [-0.001007447,0.002411702,0.02655,0.082526596,0.128374468,0.140618085,0.066878723,0.103357447,0.08095,0.040015957,0.004214894,-0.001868085] 
},{ 
    name: "2011", 
    data: [0.001191489,0.003752128,0.027225532,0.090589362,0.129121277,0.141264894,0.119343617,0.113290426,0.093575532,0.044221277,0.015881915,0.004068085] 
} 
], 
...

但我不知道我有多麼的Java類cript代碼必須看起來像，以產生這樣的結果。任何人都可以給我一個提示嗎？

來源

2016-11-28 luftikus143

您可以提取您的數據是這樣的：

function extract(csv) { 
    var rows = csv.split(/\r\n|\n/); 
    var data; 
    var series = []; 
    var serie = {name: -1, data: []}; 
    for (var i = 0; i < rows.length; i++) { 
      data = rows[i].split(','); 
     if (serie.name === -1) { 
       serie.name = data[0].substr(0,4); 
     } 
     else if (serie.name !== data[0].substr(0,4)) { 
      series.push(serie); 
      serie = {name: data[0].substr(0,4), data: []}; 
     } 
     serie.data.push(parseFloat(data[3])); 
    } 
    series.push(serie); 
    return series; 
}

的jsfiddle：https://jsfiddle.net/mk7x7bbe/

來源

2016-11-28 09:36:00 Fefux

哇，這太酷了。非常感謝！小問題依然存在，我嘗試徒勞地解決：我使用'chart1 = new Highcharts.Chart（}'，因爲我的頁面上會有多個圖表;而且，由於使用了web服務，我在調用'success：function（data）'中調用'extract（csv）'，我會這樣做'var series_return = extract（data）;'然後將它添加'chart1.addSeries（series_return）;' 。但是這不起作用，我已經改變了[小提琴]（https://jsfiddle.net/luftikus143/temscLqj/1/），以便更清晰。 – luftikus143

我仍然沒有成功地將它轉換成這是一個工作示例，尤其是現在，由於數據組合通過一個Ajax調用，使用'success：function（data）{}'，我有一個調用'series_return = extract（csv）;''那裏有'chart.addSeries（series_return） ;'。但那不行，有什麼不對嗎？我更新了[小提琴]（https://jsfiddle.net/luftikus143/temscLqj/3/）以反映我的需求。 – luftikus143

將CSV webservice轉換爲多年Highcharts線圖

回答

相關問題