如何使用Plotly.js的restyle结合WebSocket实时更新K线图数据

嘿，我来帮你搞定这个问题！你已经有了初始K线图的创建代码，接下来用restyle更新其实很直接，我分步骤给你讲清楚：

第一步：先保存图表引用（可选但推荐） #

创建图表的时候，把返回的对象存下来，后续操作会更方便：

var candleDiv = document.getElementById('candle-chart');
var data = {
  x: x,
  open: open,
  close: close,
  high: high,
  low: low,
  type: 'candlestick',
};
var layout = {
  datarevision: candleCount,
  dragmode: 'zoom',
  showlegend: false,
  xaxis: {
    type: 'date',
    range: [x[x.length - 26], x[x.length - 1]],
  }
};
// 保存图表实例
var candleChart = Plotly.newPlot(candleDiv, [data], layout);

第二步：处理WebSocket收到的新数据 #

根据你收到的是新的完整K线还是当前正在形成的K线的实时更新，分两种情况处理：

情况1：收到新的完整K线（比如每分钟生成一根新K线）

把新数据追加到现有数组里，如果要保持显示最近25根K线（和你初始的x轴范围一致），记得裁剪数组：

// 假设WebSocket返回的新数据是：newX, newOpen, newClose, newHigh, newLow
x.push(newX);
open.push(newOpen);
close.push(newClose);
high.push(newHigh);
low.push(newLow);

// 保持数组长度不超过25，超出就移除最旧的那根
if (x.length > 25) {
  x.shift();
  open.shift();
  close.shift();
  high.shift();
  low.shift();
}

情况2：收到当前K线的实时更新（比如逐笔数据更新当前K线的高低收）

不需要追加新元素，直接修改数组最后一个元素即可：

// 假设收到当前K线的最新数据：newX（时间戳）、newClose、newHigh、newLow
x[x.length - 1] = newX; // 如果时间戳需要更新的话
close[x.length - 1] = newClose;
high[x.length - 1] = Math.max(high[x.length - 1], newHigh); // 取最高值
low[x.length - 1] = Math.min(low[x.length - 1], newLow); // 取最低值
// 开盘价一般不变，所以不用修改open数组

第三步：用restyle更新图表数据 #

调用Plotly.restyle，传入要更新的属性和对应的新数组，指定要更新的trace索引（你的K线图只有1个trace，所以传0或者省略）：

// 更新K线的所有数据属性
Plotly.restyle(candleDiv, {
  x: [x],
  open: [open],
  close: [close],
  high: [high],
  low: [low]
}, 0);

第四步：更新布局（可选但重要） #

别忘了更新datarevision（让Plotly明确识别到数据变化），同时调整x轴范围来跟随最新数据：

// 递增candleCount，更新datarevision
candleCount += 1;
Plotly.relayout(candleDiv, {
  datarevision: candleCount,
  xaxis: {
    // 保持显示最近25根K线，处理数组长度不足的边界情况
    range: [x[x.length - 26] || x[0], x[x.length - 1]]
  }
});

关键注意点 #

• 确保所有数据数组（x、open、close、high、low）的长度始终一致，不然Plotly会报错
• 如果只需要更新部分属性（比如只更新close、high、low），可以只传这些属性到restyle里，不用全传，这样更高效：

  Plotly.restyle(candleDiv, {
    close: [close],
    high: [high],
    low: [low]
  }, 0);
  

内容的提问来源于stack exchange，提问作者SimpleProgrammer