在Plotly.js中使用样式更新烛台数据点 [英] Updating candlestick data point using restyle in Plotly.js
问题描述
我正在使用WebSocket连接使用实时数据更新烛台图.
I am using a WebSocket connection to update a candlestick chart with live data.
创建初始烛台图相对容易:
Creating the initial candlestick chart is relatively easy:
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);
但是, restyle 方法的文档没有内容对数据的更新非常重要.有关如何显示数据的更多信息.经过大量修改后,我发现了一种直接更新数据变量的合理解决方法:
However, the documentation for the restyle method doesn't talk much to the update of data. More about how the data is displayed. After much tinkering, I found a reasonable workaround of updating the data variable directly:
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]);
除了在旧蜡烛上绘制新蜡烛外,此方法有效.当棒从绿色(增加)的棒变成红色(减少)的棒时,这尤其会分散注意力.
This works, except that it appears to draw the new candle on the old candle. This becomes particularly distracting when the stick changes from a green (increasing) stick to a red (decreasing) stick.
是否有正确的语法来实现我试图做的事情,从而不会出现显示问题?
Is there a correct syntax to achieve what I am attempting to do such that I don't get display issues?
我签出了此链接来自这篇文章,但我无法获取在烛台图上下文中使用的方法.
I checked out this link from this post but I couldn't get the method used to work in the context of a candlestick chart.
推荐答案
您可能希望查看Plotly.react
方法而不是Plotly.restyle
:
You may want to look at the Plotly.react
method instead of Plotly.restyle
: https://plot.ly/javascript/plotlyjs-function-reference/#plotlyreact
这篇关于在Plotly.js中使用样式更新烛台数据点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!