0
我是新來使用highcharts和web開發。我正在顯示來自REST API的數據。我有一個圖chart1這是在getJSON方法。該圖表按預期顯示數據。但是，在getJSON方法之外的其他圖表chart不在顯示數據。Highcharts圖表不顯示
console.log()之後getJSON方法顯示要放在圖表上的數據更新，如預期。爲什麼chart（應顯示環境光）不起作用？
$(function updat() {
var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var humid = [],
date = [],
high=[],
day=[],
chanceOfRain=[],
humid_final = [],
day_final=[],
high_final=[],
chanceOfRain_final=[],
Itemss=[],
SortedItems=[]
var htmlText='';
$.getJSON(url, function (json) {
$(json['Items']).each(function(i, data) {
//Store indicator name
// fill the date array
humid.push(data.humidity);
// fill the string data array
date.push(data.Date);
high.push(data.high);
day.push(data.Day);
chanceOfRain.push(data.chanceOfRain);
});
\t //unsorted array
Itemss=$(json['Items']);
//console.log("ITEMS",Itemss);
//sorted array- date
date.sort(function(a,b) { return a - b;});
// Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
console.log("Sorted Days", date);
Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
console.log(" Sorted ITEMS",Itemss);
////////
///////
// query send string that we need to convert into numbers
for (var i = 0; i < humid.length; i++) {
if (humid[i] != null) {
humid_final.push(parseFloat(humid[i]));
high_final.push(parseFloat(high[i]));
day_final.push(parseFloat(day[i]));
chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
} else {
humid_final.push(null)
};
}
//sorting the arrays
day_final.sort(function(a,b) { return a - b;});
// console.log("Sorted day_final", day_final);
humid_final.sort(function(a,b) { return a - b;});
//ACTIVITY LOG
var h1 = [10, 20, 30, 40,50,60];
var t1 = [50, 60, 70, 80, 90, 100];
var activ= document.querySelector('.activ');
for(var i=0; i<h1.length;i++){
activ.innerHTML += `<p>Temperature was ${t1[i]} degrees and humidity was ${h1[i]} % `;
}
var chart1 = new Highcharts.chart({
credits: {
enabled: false
},
chart: {
height: 200,
type: 'spline',
renderTo: 'temp&humid',
marginBottom: 100
},
title: {
text: 'Temperature and Humidity'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: ''
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'Temperature',
data: chanceOfRain_final,
color:'#646569' //
},
{
type:'line',
name:'Humidity',
data: day_final,
color:'#c5050c'
}]
});
var chart2= Highcharts.chart('stacked', {
credits: {
enabled: false
},
chart: {
height: 250,
width: 400,
type: 'column'
},
title: {
text: "Today's Light and Water Sources"
},
xAxis: {
categories: ['Water', 'Light']
},
yAxis: {
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Natural',
data: [7 , 6],
color:'#c5050c'
}, {
name: 'Automatic',
data: [ 3, 4],
color: '#646569'
}]
});
}); //getJSON method
//setTimeout(updat, 3000);
console.log("high_final!",high_final);
var chart = new Highcharts.chart({
credits: {
enabled: false
},
chart: {
height: 200,
type: 'spline',
renderTo: 'light',
marginBottom: 100
},
title: {
text: ' Ambient Light'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: ''
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'light level',
data: high_final, //
color: '#9b0000'
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>
<div id="light" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="stacked"> </div>
<div id="parentContainer" style="margin-left:400px; width: 200px; margin-top: -19%" >
\t <div id="currentSatus"><center><b>Current Status</b><center></div>
\t <br>
\t <div id="temp" style="background: #72D923;padding-top:10px; height: 30px"><font face='verdana'><center>Temperature</center></font> </div>
\t <div id="hum" style="padding-top:10px; background: red; height: 30px"><font face='verdana'><center>Humidity</center></font></div>
\t <div id="water" style="background:#72D923;padding-top:10px; height: 30px "><font face='verdana'><center>Water</center></font></div>
\t <div id="ligh" style="background: red; padding-top:10px; height: 30px"><font face='verdana'><center>Light</center></font></div>
</div>
<div class=" activ" id="log" style="margin-left: 600px; text-align: center; margin-top: -16%"><center><b>Activity Log</b></center> </div>
是否要打印此控制檯的值==「Sorted Days」？ –
@MaulikBhatt，我想讓Highchart「圖表」創建一個「high_final」的圖表 – user8446995
除了@Daniel W的答案，您可以將第三個圖表放在'setTimeout（）'函數[setTimeout API]（https：/ /developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout）。例如：http://jsfiddle.net/48ey8my7/。 –