PyQt+Plotly应用中图表标签双击编辑功能实现方法问询

你不需要自行创建额外控件，Plotly本身就支持通过配置和简单逻辑实现双击编辑轴标签、标题的需求，具体实现方式如下：

1. 开启Plotly内置编辑功能 #

在生成Plotly图表时，通过config参数开启全局可编辑模式，双击轴标签、标题等文本元素会自动进入编辑状态：

import plotly.express as px

# 生成示例图表
fig = px.line(x=[1,2,3], y=[4,5,6], title="示例图表")
# 开启可编辑配置
config = {"editable": True}
# 生成带编辑功能的plot_div
plot_div = fig.to_html(config=config, full_html=False)

将这个plot_div传入你现有的HTML模板即可，默认编辑逻辑会处理双击文本的交互。

2. 自定义编辑行为（可选） #

如果默认的编辑样式或交互不符合需求，可以在HTML中添加自定义JavaScript逻辑，监听双击事件实现自定义编辑流程：

<html>
    <head>
        <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var graphDiv = document.querySelector('.plotly-graph-div');
                // 监听图表区域双击事件
                graphDiv.addEventListener('dblclick', function(e) {
                    var target = e.target;
                    // 判断是否为目标文本元素
                    if (target.classList.contains('xtitle') || target.classList.contains('ytitle') || target.classList.contains('gtitle')) {
                        var originalText = target.textContent;
                        var input = document.createElement('input');
                        input.value = originalText;
                        // 替换原文本为输入框
                        target.parentNode.replaceChild(input, target);
                        input.focus();
                        // 输入完成后更新图表
                        input.addEventListener('blur', function() {
                            var newText = input.value;
                            if (target.classList.contains('xtitle')) {
                                Plotly.relayout(graphDiv, 'xaxis.title.text', newText);
                            } else if (target.classList.contains('ytitle')) {
                                Plotly.relayout(graphDiv, 'yaxis.title.text', newText);
                            } else if (target.classList.contains('gtitle')) {
                                Plotly.relayout(graphDiv, 'title.text', newText);
                            }
                        });
                    }
                });
            });
        </script>
    </head>
    <body style='margin:0; padding:0; background-color:{self.figure_bg_color};'>
        {plot_div}
    </body>
</html>

3. 同步编辑结果到PyQt端（可选） #

如果需要把编辑后的文本同步回Python代码，可通过QWebChannel建立JS与PyQt的通信，在编辑完成后调用Python方法传递新内容。

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