Chart.js 绘制实时数据答案

【问题标题】：Chart.js plot live dataChart.js 绘制实时数据
【发布时间】：2021-09-07 13:43:30
【问题描述】：

我正在从 websocket 接收实时股票数据并将数据推送到数组中。我想用实时数据绘制折线图。

let aaplArr = new Array(); // creating an empty array

let rowData = x.Data[0].RowData[4]; // this the data received from the websocket

aaplArr.push(rowData); // pushing data into array

let graphPoints = (arr) => {  
 var myChart = new Chart(ctx, {
      type: 'line',
      data: {
          
          datasets: [{
             
              data: arr,
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                 
              ],
              borderWidth: 1
          }]
      },
   
  });

我想调用 graphPoints(aaplArr) 函数。我没有得到图表上的数据。我该如何解决这个问题？

我已经为图表使用了 HTML 画布，并且需要为数组中的每个新值不断重新加载图表。

【问题讨论】：

标签： javascript graph websocket chart.js real-time

【解决方案1】：

您每次都尝试再次创建图表，这是无效的，甚至不可能，如果我是正确的，chart.js 会抛出一个错误，表明画布已在使用中，以实现您想要创建图表所需的内容一旦在函数之外，存储在一个变量中，然后在你的graphPoints函数中调用myChart.data.datasets[0].data.push(...arr)，之后你可以像这样调用chart.js上的更新方法：mychart.update()这将使chart.js更新和渲染所有新值。

【讨论】：