То, что вы ищете, это Plotly.react или Plotly.addTraces / Plotly.deleteTraces. Вот документы .
Чтобы обновить данные, вы не можете изменить их. Вам необходимо создать новый неизменный экземпляр данных ( ссылка ).
Таким образом, вы можете сделать копию данных и:
Plotly.react('myDiv', data.map((trace, i) => {
if (i != 1) return trace;
return <new trace>
})
Или, Вы можете удалить след и повторно добавить его:
const newTrace = {...} // some trace object
Plotly.deleteTraces('myDiv', 1); // remove at index 1
Plotly.addTraces('myDiv', newTrace);
Ниже приведен пример обновления графика после 1-секундного перерыва:
var trace1 = {
x: [1, 2, 3],
y: [40, 50, 60],
name: 'yaxis data',
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [4, 5, 6],
name: 'yaxis2 data',
yaxis: 'y2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Double Y Axis Example',
yaxis: {title: 'yaxis title'},
yaxis2: {
title: 'yaxis2 title',
titlefont: {color: 'rgb(148, 103, 189)'},
tickfont: {color: 'rgb(148, 103, 189)'},
overlaying: 'y',
side: 'right'
}
};
Plotly.newPlot('myDiv', data, layout);
setTimeout(() => {
const newTrace = {
x: [2, 3, 4],
y: [4, 10, 20],
name: 'yaxis2 data',
yaxis: 'y2',
type: 'scatter'
}
// delete the second trace (index 1) or delete multiple traces with Plotly.deleteTraces('myDiv', [0,1])
Plotly.deleteTraces('myDiv', 1);
// add a new trace
Plotly.addTraces('myDiv', newTrace);
}, 1000)
<head><script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head>
<div id="myDiv"></div>