ハイチャートで使用するJSONデータの処理

Question

ハイチャートを使用して外部のデータソースからグラフを作成したいと考えています。コルスの

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

より多くのエントリがあります：私は「created_atと」と「フィールド1」、それはこのように見えるようにするに変換する必要があり

{ 
"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" 
    } 
]} 

：私が遭遇した問題は、私は互換性のないデータを持っているということですそれを変換できるループ、特に日付を作成するのに助けが必要です。

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>

パスformattedData highchartsで

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

ともxAxisなど、あなたが使用することができます `UTC`を使用したい場合はtype: 'datetime',