我正在使用来自Cumulocity的json多维数组来显示价值几个月的数据,但希望它每天显示数据。
我目前正在使用下一页上显示的第一个数组中显示的数据。数据在第二个数组中可用,但是我不确定如何通过Chart.js访问它,因为这些数组是根据时间戳命名的。
当前使用的JSON
{
"measurements": [
{
"time": "2018-05-23T00:16:40.000Z",
"id": "6395294",
"self": "https:\/\/greencitysolutions.cumulocity.com\/measurement\/measurements\/6395294",
"source": {
"id": "3223990",
"self": "https:\/\/greencitysolutions.cumulocity.com\/inventory\/managedObjects\/3223990"
},
"type": "cc",
"gcs_libelium_CO2": {
"CO2 south": {
"unit": "ppm",
"value": 419.087
}
}
},
{
"time": "2018-05-23T00:38:44.000Z",
"id": "6395985",
"self": "https:\/\/greencitysolutions.cumulocity.com\/measurement\/measurements\/6395985",
"source": {
"id": "3223990",
"self": "https:\/\/greencitysolutions.cumulocity.com\/inventory\/managedObjects\/3223990"
},
"type": "cc",
"gcs_libelium_CO2": {
"CO2 south": {
"unit": "ppm",
"value": 419.135
}
}
},
],
"statistics": {
"currentPage": 1,
"pageSize": 2000,
"totalPages": null
},
"self": "https:\/\/greencitysolutions.cumulocity.com\/measurement\/measurements?aggregationType=DAILY&dateTo=2018-06-22&pageSize=2000&fragmentType=gcs_libelium_CO2&fragmentType=aggregatedMeasurement&source=3223990&dateFrom=2018-05-23¤tPage=1"
}
可用系列数据JSON
{
"values": {
"2018-05-23T00:00:00.000Z": [
{
"min": 0.6,
"max": 6.5
},
{
"min": 1645,
"max": 1645
},
{
"min": 1645,
"max": 1645
},
{
"min": 613,
"max": 718
},
{
"min": 53.8,
"max": 58.2
},
{
"min": 8.86,
"max": 13.37
},
{
"min": 4.31,
"max": 59.73
},
{
"min": 9,
"max": 12.1
},
{
"min": 3.92,
"max": 36.06
},
{
"min": 2.64,
"max": 28.24
},
{
"min": 71.373,
"max": 95.202
},
{
"min": 75,
"max": 88
},
{
"min": 1215,
"max": 1238
},
{
"min": 394.638,
"max": 443.776
},
{
"min": 0,
"max": 47
},
{
"min": 0.375,
"max": 3.36
},
{
"min": 47,
"max": 110
},
{
"min": 19,
"max": 23
},
{
"min": 0,
"max": 23
},
{
"min": 0,
"max": 34
},
{
"min": 0.194,
"max": 0.35
},
{
"min": 12730,
"max": 14490
},
{
"min": 930,
"max": 1243
},
{
"min": 102147.53,
"max": 102440.36
},
{
"min": 1230,
"max": 21140
},
{
"min": 400,
"max": 600
},
{
"min": -610,
"max": 1890
}
],
"2018-05-24T00:00:00.000Z": [
{
"min": 0.5,
"max": 6.6
},
{
"min": 1645,
"max": 1645
},
{
"min": 1645,
"max": 1645
},
{
"min": 710,
"max": 807
},
{
"min": 51.6,
"max": 55
},
{
"min": 8.07,
"max": 20.74
},
{
"min": 6.67,
"max": 82.63
},
{
"min": 8.5,
"max": 14.1
},
{
"min": 4.82,
"max": 63.51
},
{
"min": 3.88,
"max": 50.91
},
{
"min": 44.408,
"max": 99.351
},
{
"min": 75,
"max": 89
},
{
"min": 1238,
"max": 1260
},
{
"min": 394.398,
"max": 419.231
},
{
"min": 0,
"max": 111
},
{
"min": 0.32,
"max": 4.11
},
{
"min": 35,
"max": 47
},
{
"min": 19,
"max": 23
},
{
"min": 0,
"max": 23
},
{
"min": 0,
"max": 41
},
{
"min": 0.099,
"max": 0.32
},
{
"min": 12730,
"max": 14490
},
{
"min": 1120,
"max": 1432
},
{
"min": 101972.72,
"max": 102407.31
},
{
"min": 1280,
"max": 22100
},
{
"min": 400,
"max": 600
},
{
"min": -620,
"max": 2310
}
],
"2018-05-25T00:00:00.000Z": [
{
"min": 0.6,
"max": 6.2
},
{
"min": 1645,
"max": 1645
},
{
"min": 1645,
"max": 1645
},
{
"min": 771,
"max": 895
},
{
"min": 49.7,
"max": 53.1
},
{
"min": 8.36,
"max": 19.96
},
{
"min": 6.02,
"max": 101.53
},
{
"min": 8.9,
"max": 15.2
},
{
"min": 4.94,
"max": 83.16
},
{
"min": 3.21,
"max": 64.41
},
{
"min": 52.244,
"max": 100
},
{
"min": 76,
"max": 89
},
{
"min": 1260,
"max": 1282
},
{
"min": 394.398,
"max": 443.823
},
{
"min": 0,
"max": 111
},
{
"min": 0.335,
"max": 4.61
},
{
"min": 35,
"max": 111
},
{
"min": 22,
"max": 23
},
{
"min": 0,
"max": 22
},
{
"min": 0,
"max": 42
},
{
"min": 0.097,
"max": 0.27
},
{
"min": 12730,
"max": 14490
},
{
"min": 1205,
"max": 1597
},
{
"min": 101855.48,
"max": 102130.53
},
{
"min": 1280,
"max": 21960
},
{
"min": 400,
"max": 600
},
{
"min": -580,
"max": 2260
}
],
"truncated": false
}
Chart.js代码正在使用
var no2json = <?php echo $no2json; ?>;
var co2json = <?php echo $co2json; ?>;
//console.log(no2json);
//console.log(co2json);
//the rest of your code
var labels1 = no2json.measurements.map(function(e) {
time1 = moment(e.time, "YYYY-MM-DDTHH:mm:ss").format("DD/MM/YY")
return time1;
});
var labels2 = co2json.measurements.map(function(e) {
time2 = moment(e.time, "YYYY-MM-DDTHH:mm:ss").format("DD/MM/YY")
return time2;
});
var data1 = no2json.measurements.map(function(e) {
return e.gcs_libelium_NO2["NO2 south"].value;
});
var data2 = co2json.measurements.map(function(e) {
return e.gcs_libelium_CO2["CO2 south"].value;
});
var ctx1 = no2canvas.getContext('2d');
var config1 = {
type: 'line',
options: {
scales: {
type: 'date',
/*xAxes: [{
ticks: {
autoSkip: true,
maxTicksLimit: 30
},
tooltips: {
mode: 'nearest',
intersect: false
}
}]*/
xAxes: [{
afterTickToLabelConversion: function(data){
var xLabels = data.ticks;
xLabels.forEach(function (labels, i) {
if (i % 2 == 1){
xLabels[i] = '';
}
});
}
}]
}
},
data: {
labels: labels1,
datasets: [
{
label: 'NO2 Levels',
data: data1,
backgroundColor: 'rgba(0, 119, 204, 0.3)'
},
]
}
};
var chart1 = new Chart(ctx1, config1);
var ctx2 = co2canvas.getContext('2d');
var config2 = {
type: 'line',
options: {
scales: {
type: 'date',
/*xAxes: [{
ticks: {
autoSkip: true,
maxTicksLimit: 30
}
}]*/
xAxes: [{
afterTickToLabelConversion: function(data){
var xLabels = data.ticks;
xLabels.forEach(function (labels, i) {
if (i % 2 == 1){
xLabels[i] = '';
}
});
}
}]
}
},
data: {
labels: labels2,
datasets: [
{
label: 'CO2 Levels',
data: data2,
backgroundColor: 'rgba(0, 119, 204, 0.3)'
},
]
}
};
var chart2 = new Chart(ctx2, config2);