2016-11-28 6 views
0

Webサービスをリクエストしています。これは、このようなCSVファイルで応答します(過去1年間の利用可能な月次データ)。私にとって重要なのはライン(別名日付と値)での情報の最初と最後の作品です。この情報を使用してCSV webserviceを複数年に変換するハイチャートの線グラフ

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グラフィックを構築したいと思います。それは次のようになります。 enter image description here

私の現在のバージョンでは、長蛇の列までのすべてのデータを追加する - いいですが、数年の間に値が同等のことはありません。

enter image description here

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] 
} 
], 
... 

しかし、私はどのように私のJavas見当がつかない:

今、私は必要なものは次のようになり、結果ですそのような結果を生み出すためには、cript codeは似ていなければなりません。誰も私にヒントを与えることができますか?

答えて

0

あなたはこのようなあなたのデータを抽出することができます。

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/

+0

うわー、それは本当にクールです。本当にありがとう!小さな問題はまだ私の側に、私は無駄に解決しようとしています:私は私のページに複数のチャートを持つように 'chart1 = new Highcharts.Chart()'を使用しています;そして、webserviceの使用のために、そのコールの 'success:function(data)'の中で 'extract(csv)'を呼び出すと、 'var series_return = extract(data);'として 'chart1.addSeries(series_return);しかし、それはうまくいきません。私はそれを明確にするために、[phiddle](https://jsfiddle.net/luftikus143/temscLqj/1/)を変更しました。 – luftikus143

+0

私はまだこれを(serial_return)と呼ばれるコールバックがあります。これは、Ajaxの呼び出しが成功した場合、 ;しかし、それはそれをしないでしょう何が間違っていますか?私は私のニーズを反映するために[フィドル](https://jsfiddle.net/luftikus143/temscLqj/3/)を更新しました。 – luftikus143

関連する問題