如何在Python中读取PyQt5 QWebEngine内JavaScript返回的Plotly点击点位数据

你可以通过Qt提供的QWebChannel实现JavaScript和Python的双向通信，具体实现步骤如下：

1. 导入依赖模块 #

首先引入通信需要的Qt核心模块：

from PyQt5.QtCore import QObject, pyqtSlot
from PyQt5.QtWebChannel import QWebChannel

2. 定义JS-Python桥接类 #

创建继承自QObject的桥接类，通过pyqtSlot装饰器暴露可被JavaScript调用的Python方法：

class PlotlyBridge(QObject):
    # 接收x、y浮点坐标的槽函数
    @pyqtSlot(float, float)
    def handle_click(self, x, y):
        # 此处可直接处理接收到的数据，或存入属性供其他逻辑调用
        print(f"获取到点击坐标：x={x}, y={y}")
        self.last_click_point = {"x": x, "y": y}

    # 如果需要接收完整点位信息，可新增接收JSON字符串的槽函数
    @pyqtSlot(str)
    def handle_full_click(self, point_json):
        import json
        point_data = json.loads(point_json)
        print(f"完整点位信息：{point_data}")

3. 注册桥接对象到Web视图 #

在初始化QWebEngineView的逻辑中添加通信通道注册代码：

self.browser = QtWebEngineWidgets.QWebEngineView(self)
vbox.addWidget(self.browser)
vbox.setSpacing(0)
vbox.setContentsMargins(0, 0, 0, 0) 

# 新增通信通道配置
self.plotly_bridge = PlotlyBridge()
web_channel = QWebChannel()
web_channel.registerObject("plotlyBridge", self.plotly_bridge)
self.browser.page().setWebChannel(web_channel)

self.show_graph(input_dict)

4. 修改Plotly注入的JS逻辑 #

把原来的alert弹窗替换为桥接方法调用，修改show_graph方法的post_script参数：

def show_graph(self, input_dict):
    # 原有绘图逻辑保持不变
    ...
    fig = go.FigureWidget(fig.to_dict()) 
    # 替换为通信逻辑的JS代码
    custom_post_script = """
    new QWebChannel(qt.webChannelTransport, function(channel) {
        // 绑定Python端暴露的桥接对象
        window.plotlyBridge = channel.objects.plotlyBridge;
        // 绑定Plotly点击事件
        document.getElementsByClassName('plotly-graph-div')[0].on('plotly_click', function(data){
            const point = data.points[0];
            // 传基础x、y坐标
            plotlyBridge.handle_click(point.x, point.y);
            // 若需要传完整点位信息可使用下行代码
            // plotlyBridge.handle_full_click(JSON.stringify(point));
        });
    });
    """
    self.browser.setHtml(fig.to_html(include_plotlyjs='cdn', post_script=custom_post_script))

内容的提问来源于stack exchange，提问作者Davide Serafini