Plotly 和 Websockets [英] Plotly and Websockets

问题描述

目前我正在尝试使用 Plotly 制作一个实时饼图，其中包含来自 websocket 连接的数据.但是，我似乎无法将数据从套接字获取到图形.现在我看到了两种方法.一种是从onmessage函数中取出数据，比如给父函数返回一个值.另一种是将 Plotly 代码放入 onmessage 函数中.目前两者都没有工作.我不打算谈论从这个线程中的 onmessage 函数中获取数据，因为这个是用于 Plotly 而不是 websocket.如果您对该部分感兴趣，我将链接一个堆栈溢出线程，在该线程中我询问了 websocket 问题.

Currently I am trying to use Plotly to make a live pie chart with data coming in from a websocket connection. However, I cant seem to get the data from the socket to the graph. Right now I see two ways of doing it. One is to get the data out of the onmessage function, such as returning a value to the parent function. The other is putting the Plotly code into the onmessage function. Neither are currently working. I'm not planning on talking about getting data out of the onmessage function in this thread since this one is for Plotly not websocket. I will link a stack overflow thread where I asked about the websocket problem if your interested in that part.

JavaScript:从 Websocket 函数中获取值

所以，关于将 Plotly 放入 onmessage 函数时遇到的问题.出于某种原因，当我将创建图形的代码剪切并粘贴到该函数中时，它冻结"了程序.脚本将正常运行，直到它到达制作图形的点，您可以看到它制作图形，然后它就坐在那里.整个代码停止，因为它应该循环回到函数的开头并更新页面上的实时文本并且此流停止.如果你想看一下，我的代码在下面给出.

So, Onto the problems I’m running into with putting Plotly inside the onmessage function. For some reason, when I cut and paste the code to create the graph into that function it "freezes" the program. The script will run as normal till it gets to the point where it makes the graph, you can see it make the graph, then it just sits there. The entire code stops as shown by the fact that it should loop back to the start of the function and update live text on the page and this stream stops. My code is given below if you want to take a look at it.

var pmsg = "null";
var ws = new WebSocket('ws://localhost:10011/');
ws.onmessage = function(event)
{
     if(pmsg == 'QC1R1TR')
     {
          QC1R1TR = event.data;
          var testing = document.getElementById('QC1R1TR');
          testing.innerHTML = "Run Time: " + QC1R1TR;
     }
 
     pmsg = event.data;

     var data = [{
     values: [2, 1],
     labels: ['TR', 'TNR'],
     type: 'pie',
     automargin: true
     }];

     var layout = {
     height: 300,
     width: 300,
     margin: {"t": 0, "b": 0, "l": 0, "r": 0},
     //showlegend: false
     };

     Plotly.newPlot('QC1R1Pie', data, layout);
}

请注意，当绘图当前是静态数字时，因此它不是变量的问题.当绘图在父函数中时有效，页面上的实时文本也是如此.

Please note that when the plot is static numbers currently so its not an issue with the variables. The plot works when its in the parent function and so does the live text on the page.

对此的任何帮助将不胜感激！

Any help with this would be greatly appreciated!

谢谢，卢克

推荐答案

通过从 websocket 获取数据，我找到了替代解决方案.有关该解决方案的详细信息，请参阅其他线程.

I found an alternative solution by getting the data out of websocket. Please see the other thread for details on that solution.

为了您的参考，我在下面再次附上了另一个线程的链接.

For your reference, I have attached the link to the other thread again below.

从 Websocket 函数中获取值

这篇关于Plotly 和 Websockets的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！