Блог

Я новичок в 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 , к чему я перехожу 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 в обоих случаях и пробовал другие версии с тем же результатом.
Ошибка возникает из-за того, что HTMLElement data по какой-то причине теряет свой атрибут.

Похоже, что-то происходит с 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.