如何使用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。

答

您需要使用两种解析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); 
    }); 
}

答

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设置。

如何使用JSON将劳动统计数据库导入Highcharts？

相关推荐