Question

我有一个基本的node.js网络服务器。连接的客户端可以将值发送到服务器。服务器将它们存储在一个数组中。该数组将每1/25秒发送回客户端，客户端使用此数组绘制图表。因此，每个客户都可以实时看到更新的图表。但是很遗憾，客户没有绘制图表。

我尝试了什么：客户端发出一个事件，并将一个值发送到服务器。服务器侦听此事件并将值存储在数组中。使用setInterval，服务器每1/25秒向客户端发出一次阵列。客户端获取数组并绘制图表。

client.js：

var numbers = [];
var context = document.getElementById("chart");
var config = {
  type: 'doughnut',
  data: {
    datasets: [
       {
       backgroundColor: ['orange', 'blue', 'yellow'],
       data: numbers,
       borderWidth: 0,           
       }
    ]
  },
  options: {
       responsive: false,
  }    
}
var chart = new Chart(context, config);

const socket = io();

var someValue = 7;

socket.emit('add', someValue);

socket.on('update', (arr) => {
    numbers = arr;
    console.log(numbers);
});

server.js：

const chartArray = [];

io.on('connection', (socket) => {
    socket.on('add', (data) => {
        chartArray.push(data);
    }); 

    setInterval(function() {
        socket.emit('update', chartArray);
    },1000/25);
});

当我将数字数组记录在客户端的控制台中时，它将起作用。服务器每1/25秒向客户端发射一次阵列，客户端获得阵列。但是该图表不会绘制。

Answer 1

因为您没有更新图表

chart.data.datasets.data = arr;
chart.update();

使用socket.io实时动态更新图表

1 个答案: