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

Question

我正在使用WebSocket连接来更新带有实时数据的烛台图表。

创建初始烛台图表相对简单：

EventFiringWebDriver eventDriver = new EventFiringWebDriver(driver);
eventDriver.Navigating += navigatedHandler;

private void navigatedHandler(object sender, WebDriverNavigationEventArgs args)
{
    MessageBox.Show(args.Url);
}

但是，restyle方法的文档并未涉及数据更新。有关数据显示方式的更多信息。经过多次修改后，我找到了直接更新数据变量的合理解决方法：

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);

这是有效的，除了它似乎在旧蜡烛上绘制新蜡烛。当棒从绿色（增加）棒变为红色（减少）棒时，这变得特别令人分心。

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

我从this link检查了this post，但我无法在烛台图表的上下文中使用该方法。

Answer 1

您可能希望查看Plotly.react方法，而不是Plotly.restyle：https://plot.ly/javascript/plotlyjs-function-reference/#plotlyreact