使用从远程服务器接收的json数据实时更新网页上的charts.js图
使用从远程服务器接收的json数据实时更新网页上的charts.js图
提问于 2018-07-27 18:25:49
我正在努力显示从气象站收到的天气信息，以在我的网页上显示为实时图表。我使用charts.js库来呈现从气象站获取的天气数据。
在代码中，函数loadChart()从气象站获取关于一个字段的json数据。并将其(作为整数)传递给dspChrt(哼唱)以呈现图形。
呈现图形的dspChrt(hum)方法的主要任务是将从laodChrt()接收到的数据放入一个每分钟更新一次的数组中，以便将其用作参数，将实时天气数据显示为折线图。
由于气象站每分钟更新一次数据，因此我使用setInterval(loadChart，60000)方法来获取每分钟更新的json数据。
我正在遵循本教程，该教程使用了我正在尝试实现的方法。
[Chart.js] little update example
但它并不起作用。
下面是我的代码：
<html>
<head>
<meta charset="utf-8">
<title>Weather Update</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
function dspChrt(hum[]) { // to be called by loadChart() to render live chart
var ctx = document.getElementById('myChart').getContext('2d');
var N = 10;
for(i=0; i<N; i++)
hum.push(0);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'Humidity',
data: hum, // json value received used in method
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'Temprature',
data: [2, 29, 5, 5, 2, 3, 10],
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
}
</script>
<script>
var myVar = setInterval(loadChart, 60000);
function loadChrt() { //fetches json data & calls dspChart() to render graph
var wData, hum;
var requestURL = 'https://cors.io/?http://api.holfuy.com/live/?s=759&pw=h1u5l4kka&m=JSON&tu=C&su=m/s'; //URL of the JSON data
var request = new XMLHttpRequest({
mozSystem: true
}); // create http request
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
wData = JSON.parse(request.responseText);
hum = wData.humidity;
console.log("wData: " + wData);
console.log("hum: " + hum);
dspChrt(hum);
}
}
request.open('GET', requestURL);
request.send(); // send the request
//dspChrt(hum);
}
</script>
</head>
<body onload="loadChart();">
<div class="container">
<h2>Weather Update</h2>
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-27 20:25:52
您在for函数名loadChart中有拼写错误。在使用之前，需要添加变量声明和函数定义。将数组的长度从10减少到7。
下面是更新后的代码片段。我也添加了温度。;)
var humArray = [];
var temArray = [];
var N = 7;
for (i = 0; i < N; i++) {
humArray.push(0);
temArray.push(0);
}
function loadChart() { //fetches json data & calls dspChart() to render graph
var wData, hum, tem;
var requestURL = 'https://cors.io/?http://api.holfuy.com/live/?s=759&pw=h1u5l4kka&m=JSON&tu=C&su=m/s'; //URL of the JSON data
var request = new XMLHttpRequest({
mozSystem: true
}); // create http request
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
wData = JSON.parse(request.responseText);
hum = wData.humidity;
tem = wData.temperature;
humArray.shift();
humArray.push(hum);
temArray.shift();
temArray.push(tem);
dspChrt(humArray, temArray);
}
}
request.open('GET', requestURL);
request.send(); // send the request
//dspChrt(hum);
}
var myVar = setInterval(loadChart, 60000);
function dspChrt(humArray, temArray) { // to be called by loadChart() to render live chart
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'Humidity',
data: humArray, // json value received used in method
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'Temprature',
data: temArray,
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body onload="loadChart();">
<div class="container">
<h2>Weather Update</h2>
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</body>
希望能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51556002
复制相关文章
相似问题
腾讯云开发者
