我使用chartjs来显示来自服务器的实时流数据,我使用ajax和php来每秒获取数据,但我认为这不是最好的主意。这是我的 JavaScript 代码。
$(document).ready(function(){
$.getJSON({
url: "http://localhost/chartJS/data.php",
method: "GET",
success: function(data) {
console.log(data);
var player = [];
var score = [];
$.each(data, function(key, value){
player.push("Player "+value[0]);
score.push(parseInt(value[1]));
});
var chartdata = {
labels: player,
datasets : [
{
label: 'Player Score',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: score
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'line',
data: chartdata
});
},
error: function(data) {
console.log(data);
}});
updateChart();
});
function updateChart()
{
var x=2;
$(document).ready(function(){
$.getJSON({
url: "http://localhost/chartJS/data.php?x="+x,
method: "GET",
success: function(data) {
console.log(data);
var player = [];
var score = [];
$.each(data, function(key, value){
player.push("Player "+value[0]);
score.push(value[1]);
});
var chartdata = {
labels: player,
datasets : [
{
label: 'Player Score',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: score
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
});
},
error: function(data) {
console.log(data);
}
});
});
setTimeout(function(){updateChart()}, 1000);
}
我听说过 websocket,但我真的不知道是否应该使用它 如果是,我如何在每次打开图表时连续获取数据。
最佳答案
我认为您正在寻找的是间隔:
The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).
示例:
setInterval(function(){ alert("Hello"); }, 3000);
每 3 秒触发一次警报。
因此,在您的情况下,只需在间隔内设置一个 ajax 调用并每 1000 毫秒调用一次,然后使用新数据修改图表。
关于javascript - 如何从服务器实时获取数据来更新我的图表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56818530/