处理 JSON 数据以在 Highcharts 中使用

Question

我想使用 highcharts 从外部数据源制作图表。我遇到的问题是我有不兼容的数据：

{
"channel":{
"id":1123376,
"name":"Global Weather Experiment Raspberry Pi",
"latitude":"0.0",
"longitude":"0.0",

"field1":"Temperature",
"field2":"Presurre",
"field3":"Humidity",
"field4":"Air Quality",
"field5":"Rain",
"field6":"Wind Speed",
"field7":"Wind Direction",
"field8":"Wind Power",

"created_at":"2016-10-22T11:37:27Z",
"updated_at":"2017-06-11T10:01:02Z",
"last_entry_id":5438},

"feeds":[
    {
    "created_at":"2017-06-11T09:01:02Z",
    "entry_id":5437,
    "field1":"23.13"
    },
    {
    "created_at":"2017-06-11T10:01:02Z",
    "entry_id":5438,
    "field1":"23.88"
    }
]}

我需要转换 "created_at" 和 "field1" 使其看起来像这样：

?([
    [Date.UTC(2017,6,11,09,01,02Z),23.13],
    [Date.UTC(2017,6,11,10,01,02Z),23.88]
]);

当然还有更多条目，我需要帮助创建可以转换它的循环，尤其是日期。

Answer 1

var data={
"channel":{
"id":1123376,
"name":"Global Weather Experiment Raspberry Pi",
"latitude":"0.0",
"longitude":"0.0",

"field1":"Temperature",
"field2":"Presurre",
"field3":"Humidity",
"field4":"Air Quality",
"field5":"Rain",
"field6":"Wind Speed",
"field7":"Wind Direction",
"field8":"Wind Power",

"created_at":"2016-10-22T11:37:27Z",
"updated_at":"2017-06-11T10:01:02Z",
"last_entry_id":5438},

"feeds":[
    {
    "created_at":"2017-06-11T09:01:02Z",
    "entry_id":5437,
    "field1":"23.13"
    },
    {
    "created_at":"2017-06-11T10:01:02Z",
    "entry_id":5438,
    "field1":"23.88"
    }
]}
//console.log(data.feeds)
var rqData=data.feeds;
var formattedData=[]
for(var i=0;i<rqData.length;i++){
//formattedData array contains (fist data) date in milliseconds and (second data) in number 
 formattedData.push([Date.parse(rqData[i].created_at),Number(rqData[i].field1)])
}
//console.log(formattedData)


Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Snow depth at Vikjafjellet, Norway'
    },
    subtitle: {
        text: 'Irregular time data in Highcharts JS'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Date'
        }
    },
    yAxis: {
        title: {
            text: 'Snow depth (m)'
        },
        min: 0
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
    },

    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        }
    },

    series: [{
        name: 'Some Year',
        // Define the data points. All series have a dummy year
        // of 1970/71 in order to be compared on the same x axis. Note
        // that in JavaScript, months start at 0 for January, 1 for February etc.
        data: formattedData
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

在 highcharts 中通过 formattedData 作为

series: [{
    name: 'Some Year'
    data: formattedData
}]

并且 xAxis 包含 type: 'datetime',

处理 JSON 数据以在 Highcharts 中使用

Processing JSON data to use in Highcharts

javascript

json

external

type-conversion

highcharts