我创建了一个网页,其中实时显示一些数字。数据使用SocketIO从Python Flask脚本发送到我的JavaScript前端。
我现在正尝试在实时图表上显示此数字,为此,我正在使用Apexcharts。问题是我无法按需列出图表。我一点都没有收到任何错误,该图表将无法正常工作或无法显示所有内容。
如您所见,从我的套接字接收的数据存储在numbers_received上。
$(document).ready(function() {
//connect to the socket server.
var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
var numbers_received = [];
//receive details from server
socket.on('newnumber', function(msg) {
console.log("Received" + msg.number);
//maintain a list of ten numbers
if (numbers_received.length >= 1) {
numbers_received.shift()
}
numbers_received.push(msg.number);
numbers_string = '';
for (var i = 0; i < numbers_received.length; i++) {
numbers_string = numbers_string + '<p>' + numbers_received[i].toString() + '</p>';
}
s
$('#log').html(numbers_string);
});
/*
// this function will generate output in this format
// data = [
[timestamp, 23],
[timestamp, 33],
[timestamp, 12]
...
]
*/
var lastDate = 0;
var data = [];
function getDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
while (i < count) {
var x = baseval;
var y = numbers_received;
data.push({
x,
y
});
lastDate = baseval
baseval += 86400000;
i++;
}
}
getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
min: 10,
max: 90
})
function getNewSeries(baseval, yrange) {
var newDate = baseval + 86400000;
lastDate = newDate
data.push({
x: newDate,
y: numbers_received
})
}
function resetData() {
data = data.slice(data.length - 10, data.length);
}
var options = {
chart: {
height: 350,
type: 'line',
animations: {
enabled: true,
easing: 'linear',
dynamicAnimation: {
speed: 2000
}
},
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
series: [{
data: data
}],
title: {
text: 'Dynamic Updating Chart',
align: 'left'
},
markers: {
size: 0
},
xaxis: {
type: 'datetime',
range: 777600000,
},
yaxis: {
max: 100
},
legend: {
show: false
},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
var dataPointsLength = 10;
window.setInterval(function() {
getNewSeries(lastDate, {
min: 10,
max: 90
})
chart.updateSeries([{
data: data
}])
}, 2000)
// every 60 seconds, we reset the data
window.setInterval(function() {
resetData()
chart.updateSeries([{
data
}], false, true)
}, 60000)
});
答案 0 :(得分:0)
在绘制图表之前,需要等待socket.on
完成。
socket.on
是异步的,这意味着该节之后的所有代码,
将在socket.on
完成之前运行,除非偶然 socket.on
运行很快。
尝试与后续设置类似的操作(请参见drawChart
)
$(document).ready(function() {
//connect to the socket server.
var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
var numbers_received = [];
var lastDate = 0;
var data = [];
//receive details from server
socket.on('newnumber', function(msg) {
console.log("Received" + msg.number);
//maintain a list of ten numbers
if (numbers_received.length >= 1) {
numbers_received.shift()
}
numbers_received.push(msg.number);
numbers_string = '';
for (var i = 0; i < numbers_received.length; i++) {
numbers_string = numbers_string + '<p>' + numbers_received[i].toString() + '</p>';
}
$('#log').html(numbers_string);
drawChart();
});
function drawChart() {
getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
min: 10,
max: 90
})
var options = {
chart: {
height: 350,
type: 'line',
animations: {
enabled: true,
easing: 'linear',
dynamicAnimation: {
speed: 2000
}
},
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
series: [{
data: data
}],
title: {
text: 'Dynamic Updating Chart',
align: 'left'
},
markers: {
size: 0
},
xaxis: {
type: 'datetime',
range: 777600000,
},
yaxis: {
max: 100
},
legend: {
show: false
},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
var dataPointsLength = 10;
window.setInterval(function() {
getNewSeries(lastDate, {
min: 10,
max: 90
})
chart.updateSeries([{
data: data
}])
}, 2000)
// every 60 seconds, we reset the data
window.setInterval(function() {
resetData()
chart.updateSeries([{
data
}], false, true)
}, 60000)
}
function getDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
while (i < count) {
var x = baseval;
var y = numbers_received;
data.push({
x,
y
});
lastDate = baseval
baseval += 86400000;
i++;
}
}
function getNewSeries(baseval, yrange) {
var newDate = baseval + 86400000;
lastDate = newDate
data.push({
x: newDate,
y: numbers_received
})
}
function resetData() {
data = data.slice(data.length - 10, data.length);
}
});