Question

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轴数据替换为“year”和“period”，并将值替换为“value”。我的问题是我不知道如何以一种很好的格式获取这些内容，例如something like this。

Answer 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（忽略字母＆＃34; M＆＃34;）以获取月份编号和年份。它会将它们组合成一个日期（d变量）。然后它会将此日期及其相关值推送到函数返回的newData数组中。

要使用它，只需致电seriesData = parseData(rawJSON)，其中rawJSON是您在此处指向的源数据文件的内容：http://api.bls.gov/publicAPI/v2/timeseries/data/LASST410000000000003

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

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

如何使用JSON将Bureau of Labor Statistics数据导入Highcharts？

2 个答案: