如何使用 JSON 将劳工统计局的数据导入 Highcharts？答案

【问题标题】：How can I work with JSON to get Bureau of Labor Statistics data into Highcharts?如何使用 JSON 将劳工统计局的数据导入 Highcharts？
【发布时间】：2016-08-17 21:58:51
【问题描述】：

Highcharts 有一些关于如何将 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。

【问题讨论】：

标签： javascript jquery json highcharts

【解决方案1】：

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

然后只需在您的 HighCharts 设置中使用 seriesData。

【讨论】：

【解决方案2】：

您需要使用以下任一方法解析 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);
    });
}

【讨论】：