Почему графики внутри QWebEngineViewn не синхронизируются? ⇐ Python

[Anonymous]

Я взял за основу код из ответа в тексте этой задачи
но когда я помещаю его в QWebEngineView из PyQt5, он не синхронизируется и ничего не делает при панорамировании или масштабированииКод Python:

Код: Выделить всё

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from PyQt5.QtWebEngineWidgets import QWebEngineView

class SynchronizedPlotWindow(QMainWindow):
def __init__(self):
super().__init__()

# Crear vistas web para las gráficas
self.graph1 = QWebEngineView()
self.graph2 = QWebEngineView()
self.graph3 = QWebEngineView()

# Cargar el contenido HTML con las gráficas sincronizadas
html_content = """





Plotly Synchronized Charts



Resize any chart, the others will get the same zoom level applied


var myDiv = document.getElementById("myDiv");
var myDiv2 = document.getElementById("myDiv2");
var myDiv3 = document.getElementById("myDiv3");
var startTime = new Date().getTime();
var timeStep = 60000;
var myDivMax = 70;
var myDiv2Max = 9000;
var myDiv3Max = 500;

var d3 = Plotly.d3,
N = 40,
x = d3.range(N).map(() => {
return new Date((startTime += timeStep));
}),
y = d3.range(N).map(() => Math.random() * myDivMax),
data = [{ x: x, y: y }];
var layout = {
height: 200,
margin: { l: 45, t: 5, r: 45, b: 45 },
xaxis: {
tickfont: {
size: 10,
color: "#7f7f7f"
}
},
yaxis: {
fixedrange: true,
tickfont: {
size: 10,
color: "#7f7f7f"
}
}
};
var layout2 = {
height: 200,
margin: { l: 45, t: 5, r: 45, b: 45 },
xaxis: {
tickfont: {
size: 10,
color: "#7f7f7f"
}
},
yaxis: {
fixedrange: true,
tickfont: {
size: 10,
color: "#7f7f7f"
}
}
};
var layout3 = {
height: 200,
margin: { l: 45, t: 5, r: 45, b: 45 },
xaxis: {
tickfont: {
size: 10,
color: "#7f7f7f"
}
},
yaxis: {
fixedrange: true,
tickfont: {
size: 10,
color: "#7f7f7f"
}
}
};

Plotly.plot(myDiv, data, layout);
var data2 = [{ x: x, y: d3.range(N).map(() => Math.random() * myDiv2Max) }];
Plotly.plot(myDiv2, data2, layout2);
var data3 = [{ x: x, y: d3.range(N).map(() => Math.random() * myDiv3Max) }];
Plotly.plot(myDiv3, data3, layout3);

var divs = [myDiv, myDiv2, myDiv3];

function relayout(ed, divs) {
if (Object.entries(ed).length === 0) {return;}
divs.forEach((div, i) =>  {
let x = div.layout.xaxis;
if (ed["xaxis.autorange"] && x.autorange) return;
if (x.range[0] != ed["xaxis.range[0]"] ||x.range[1] != ed["xaxis.range[1]"])
{
var update = {
'xaxis.range[0]': ed["xaxis.range[0]"],
'xaxis.range[1]': ed["xaxis.range[1]"],
'xaxis.autorange': ed["xaxis.autorange"],
};
Plotly.relayout(div, update);
}
});
}

var plots = [myDiv, myDiv2, myDiv3];
plots.forEach(div => {
div.on("plotly_relayout", function(ed) {
relayout(ed, divs);
});
});



"""

# Cargar el contenido HTML en cada gráfico
self.graph1.setHtml(html_content)
self.graph2.setHtml(html_content)
self.graph3.setHtml(html_content)

# Disposición de los widgets
layout = QVBoxLayout()
layout.addWidget(self.graph1)
layout.addWidget(self.graph2)
layout.addWidget(self.graph3)

container = QWidget()
container.setLayout(layout)
self.setCentralWidget(container)

if __name__ == "__main__":
app = QApplication(sys.argv)
window = SynchronizedPlotWindow()
window.show()
sys.exit(app.exec_())

Я уже пробовал обновить Plotly и QWebEngineView и удалить кеш из Plotly, но, похоже, ничего не работает. Когда я использую html-код из исходной проблемы, он работает как задумано.

Подробнее здесь: https://stackoverflow.com/questions/791 ... ot-synched