處理要在Highcharts中使用的JSON數據

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',