如何使用JSON將勞動統計數據庫導入Highcharts？

Highcharts有關於如何將JSON文件合併到圖表中的一些很好的例子，但他們的例子是pretty simple JSON files。如何使用JSON將勞動統計數據庫導入Highcharts？

這是我想要做的。

取本實施例從的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。

來源

2016-08-17 burchw78

您需要使用兩種解析JSON：

JSON.parse(//JSON string)

或

$.parseJSON(//JSON string)

一旦你的JSON對象，那麼你只要寫一個函數來抓住你想要的數據。

一旦你的數據，你可以撥打：

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

如果你要不斷地更新數據，那麼你需要寫，做一個AJAX調用抓住並用一組數據的功能超時期限。

例

//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); 
    }); 
}

來源

2016-08-17 22:26:09 Jecoms

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; 
}

這將遍歷JSON和拉出periodName（忽略字母「M」）來獲取月份數字和年份。它會將它們合併成一個日期（d變量）。然後它會將此日期和它的相關值推入該函數返回的newData數組中。

要使用它，只需調用seriesData = parseData(rawJSON)其中rawJSON是數據文件的源代碼，你指出來這裏的內容：http://api.bls.gov/publicAPI/v2/timeseries/data/LASST410000000000003

然後，只需使用seriesData在HighCharts設置。

來源

2016-08-17 22:53:25

如何使用JSON將勞動統計數據庫導入Highcharts？

回答

相關問題