JSONを使用して労働局統計局のデータをHighchartsに取得するにはどうすればよいですか？

Question

ハイチャートには、JSONファイルをチャートに組み込む方法の良い例がいくつかありますが、その例はpretty simple JSON filesです。

ここで私がしたいことがあります。

JSFiddleから（http://jsfiddle.net/xhz7oujw/を）この例を見てみましょう：

HTML：

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

JAVASCRIPT：

$(function() { 
$('#container').highcharts({ 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    series: [{   
     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
    }] 
}); 

とBLSからこのファイル（http://api.bls.gov/publicAPI/v2/timeseries/data/LASST410000000000003）を使用してデータを交換する：

{ 
    "status": "REQUEST_SUCCEEDED", 
    "responseTime": 16, 
    "message": [ 

    ], 
    "Results": [ 
{ 
    "series": [ 
    { 
     "seriesID": "LAUCN040010000000005", 
     "data": [ 
     { 
      "year": "2013", 
      "period": "M11", 
      "periodName": "November", 
      "value": "16393", 
      "footnotes": [ 
      { 
       "code": "P", 
       "text": "Preliminary." 
      } 
      ] 
     }, 
     { 
      "year": "2013", 
      "period": "M10", 
      "periodName": "October", 
      "value": "16536", 
      "footnotes": [ 
      { 
      ... 
      } 
      ] 
     } 
     ] 
    } 
    ] 
} 

私は単純にy軸データを "年"と "期間"に置き換え、値を "値"に置き換えたいだけです。私の問題は、これらを良いフォーマットで入手する方法がわからないことです。例えば、something like thisです。

Answer 1

あなたはどちらかとJSONをパースする必要があります：あなたはJSONオブジェクトを作成したら、あなたはちょうどあなたが望むデータをつかむために関数を記述

JSON.parse(//JSON string) 

または

$.parseJSON(//JSON string) 

。あなたはデータを持っていたら

、あなたが呼び出すことができます：あなたは常にデータを更新する場合

myChartObject.series[0].setData(//parsed Data, true); 

は、その後、あなたが取得し、使用してデータを設定するには、AJAX呼び出しを行う関数を記述する必要がありますタイムアウト期間。

例JSON経由

//When you create your Chart object, set the events object 
myChart = new HighCharts.Chart({ 
    chart: { 
     ... 
     events: { 
      load: requestData //function 
     }, 
     ... 
    } 
}); 

function requestData() { 
    $.ajax({ 
     url: dataSource, 
     cache: false, 
    }).done(function (data) { 
     // parse JSON 
     // set data 
    }).always(function() { 
     setTimeout(requestData, 6000); 
    }); 
} 

Answer 2

function parseData(json) { 
    series = json.Results[0].series[0]; 
    var newData = [], m, d; 
    for (var i=0; i < series.length; i++) { 
     m = series[i].periodName.substr(1); // strip out the letter "M" from the periodName 
     d = new Date(series[i].year, m, 1); 
     newData.push({d, series[i].value); 
    } 
    return newData; 
} 

この意志ループと月の数と年を取得する（文字「M」を無視して）periodNameを引き出します。それらを日付に組み合わせます（d変数）。次に、この日付がプッシュされ、その値が関数によって返されるnewData配列に関連付けられます。

rawJSONはあなたがここに指摘したソース・データ・ファイルの内容ですちょうどseriesData = parseData(rawJSON)を呼び出し、それを使用するには：http://api.bls.gov/publicAPI/v2/timeseries/data/LASST410000000000003

は、それからちょうどあなたのHighChartsのセットアップでseriesDataを使用しています。