javascript - 从 SignalR 事件调用 Plotly.restyle 时,Plotly 会引发 TypeError
问题描述
我是 Plotly 的新手,我正在尝试做一个非常简单的 PoC 来根据 SignalR (WebSocket) 事件实时更新绘图。
我在一支可以正常工作的笔中有以下内容:
var data = [
{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar'
}
];
Plotly.newPlot('myDiv', data);
setTimeout(() => {
const newData = "\"1,2,3\""; // data is received like this in SignalR
const data = newData.replace(/"/g,"");
const result = [data.split(',')];
Plotly.restyle('myDiv', 'y', result);
}, 2000);
我现在正试图让它在 Vue+SignalR 上下文中工作:
const plotData = [
{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [1, 1, 1],
type: 'bar'
}
];
Plotly.react('testplot', plotData);
const app = new Vue({
el: '#app',
data: data,
methods: { ... }
);
//...
const connection = new signalR.HubConnectionBuilder()
.withUrl(apiBaseUrl + '/api', {
accessTokenFactory: () => {
return generateAccessToken(data.username)
}
})
.configureLogging(signalR.LogLevel.Information)
.build();
connection.on('newMessage', onNewMessage);
//...
function onNewMessage(message) {
const data = message.Text.replace(/"/g, "");
const result = [data.split(',')];
Plotly.restyle('testplot', 'y', result); --> error here
};
result
我传递给与 Pen 中的restyle
相同,[['1', '2', '3']]
.
抛出的错误是:
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at Object.r.coerceTraceIndices (plotly-2.4.2.min.js:58)
at Object.D [as restyle] (plotly-2.4.2.min.js:58)
at HubConnection.onNewMessage (index:207)
at HubConnection.ts:367
at Array.forEach (<anonymous>)
at HubConnection.invokeClientMethod (HubConnection.ts:367)
at HubConnection.processIncomingData (HubConnection.ts:297)
at WebSocketTransport.HubConnection.connection.onreceive (HubConnection.ts:54)
at WebSocket.webSocket.onmessage (WebSocketTransport.ts:56)
我在网上找不到任何东西来告诉我可能导致错误的原因。我plotly-2.4.2.min.js
在这两种情况下都使用,并尝试了其他版本,结果相同。该错误来自 HTMLElementdata
由于某种原因丢失其属性。
解决方案
Vue(我不熟悉)似乎发生了一些事情,它杀死了.data
HTMLElement 的属性。我试过这段代码:
var testPlotElemenet = document.getElementById('testplot');
if (testPlotElemenet.data) {
Plotly.restyle(testPlotElemenet, 'y', result);
}
else {
var testData = [
{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar'
}
];
Plotly.react(testPlotElemenet, testData);
Plotly.restyle(testPlotElemenet, 'y', result);
}
第一次需要重新创建绘图,但以下消息有效并且该.data
属性具有预期值。
最后,由于我不需要 Vue(它来自我使用的 Microsoft 示例),我删除了所有与 Vue 相关的代码,并且代码在 CodePen 中工作得很好。
推荐阅读
- prolog - 优化 CLPFD 性能(累积,global_cardinality)
- bash - 通过 bash 脚本进行 Git 克隆 ssh 身份验证
- javascript - 如何使用 Javascript 启用/禁用鼠标滚动
- git - 从父仓库将更改作为子模块推送到不同的分支
- python-3.x - Holoviews(Bokeh) 图的辅助轴
- python - 从字典列表中删除所有重复一个(键,值)的元素
- python - Python中方法下的条件
- duplicates - 如何检查 HDFS 上文件夹/文件中的重复记录
- javascript - 如何使用 ajax 将 javascript 变量发送到 PHP?
- android - 如何在 Kotlin 中将 setter 设为私有,用于非最终变量?