Javascript 在Plotly.js中使用restyle更新烛台数据点

我正在使用WebSocket连接用实时数据更新烛台图表

创建初始烛台图表相对容易：

var candleDiv = document.getElementById('candle-chart');
var data = {
    x: x, //Each of these is a single dimension array of the same length
    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]], //Only show the last 25 entries so it's not zoomed out too far.
        rangeslider: {
            visible: false
        },
        yaxis: {
            autorange: true,
        }
    }
}
data.xaxis = 'x';
data.yaxis = 'y';
data = [data];
Plotly.plot(candleDiv, data, layout);

然而，该方法的文档与数据的更新没有太多关系。有关如何显示数据的详细信息。经过多次修补，我找到了一个直接更新数据变量的合理解决方法：

candleDiv.data[0].open[candleDiv.data[0].open.length - 1] = updatedOpenValue;
candleDiv.data[0].close[candleDiv.data[0].close.length - 1] = updatedCloseValue;
candleDiv.data[0].high[candleDiv.data[0].high.length - 1] = updatedHighValue;
candleDiv.data[0].low[candleDiv.data[0].low.length - 1] = updatedLowValue;
Plotly.restyle(candleDiv, 'data[0]', candleDiv.data[0], [0]);

这是可行的，只是它似乎是在旧蜡烛上画新蜡烛。当斗杆从绿色（增加）斗杆变为红色（减少）斗杆时，这会特别分散注意力

是否有一个正确的语法来实现我试图做的事情，这样我就不会出现显示问题

---

我从中签出，但无法获得用于烛台图表上下文的方法

您可能希望查看

Plotly.react

方法，而不是

Plotly.restyle

：

正如函数名所示，我相信这只允许您添加数据点，而不允许更新现有数据点。啊，在这种情况下，我可以推荐

Plotly.react

？

Plotly.react

似乎只是

restyle

和

relayout

的组合。所有这些方法都有相同的问题。或者，至少当我尝试使用它们时。

Plotly.react

允许您指定所需绘图的全部内容，并有效地更新现有绘图。它的工作原理与Plotly.newPlot类似，只是更新速度明显加快。

restyle

和

relayout

的组合方法是

Plotly.update

。使用

Plotly.react

的唯一诀窍是，根据文档，如果您想在适当的位置修改数据，您必须在每次调用时都撞击

layout.datarevision

属性。