从 SignalR 事件调用 Plotly.restyle 时，Plotly 抛出 TypeError

Question

我是 Plotly 的新手，我正在尝试做一个非常简单的 PoC，以根据 SignalR (WebSocket) 事件实时更新绘图。

我的 Pen 中有以下内容，效果很好：

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

我传给restyle的result和Pen一样，[['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 并尝试了具有相同结果的其他版本。该错误来自 HTMLElement 出于某种原因丢失其 data 属性。

Answer 1

Vue（我不熟悉）似乎发生了一些事情，杀死了 HTMLElement 的 .data 属性。我试过这段代码：

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 中一样工作得很好。

从 SignalR 事件调用 Plotly.restyle 时，Plotly 抛出 TypeError

Plotly throws a TypeError when calling Plotly.restyle from a SignalR event

javascript

plotly

signalr