如何在Python Dash的Plotly图表ModeBar中添加自定义按钮？

问题背景 #

我有一个使用Plotly显示图片的简单Dash应用，代码如下：

import dash
import plotly.express as px
from dash import html, dcc
from skimage import data

img = data.chelsea()
fig = px.imshow(img)

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dcc.Graph(id = "graph-pic", className="graph-pic", figure=fig)
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True,use_reloader=True)

需要给该图表的ModeBar添加一个自定义按钮，已知可以通过配置实现，但仅找到JavaScript示例，没有Python版本。已在assets文件夹下编写创建按钮的JS代码：

var config = {
    modeBarButtonsToAdd: [
        {
            name: 'button1',
            icon: Plotly.Icons.pencil,
            direction: 'up',
            click: function(gd) {alert('button1')}
        }]
}

不清楚如何在Python中将这个config传递给图表？

解决方案 #

方法一：直接在Python中配置（推荐）

无需单独编写JS文件，直接在dcc.Graph组件中通过config参数传入配置，Python会自动将配置转换为前端可识别的格式：

修改后的完整Python代码：

import dash
import plotly.express as px
from dash import html, dcc
from skimage import data

img = data.chelsea()
fig = px.imshow(img)

app = dash.Dash(__name__)

# 定义ModeBar自定义按钮的配置
graph_config = {
    "modeBarButtonsToAdd": [
        {
            "name": "button1",
            # 使用Plotly内置铅笔图标的SVG路径，也可替换为自定义SVG路径
            "icon": {"width": 20, "height": 20, "path": "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"},
            "direction": "up",
            # 传入字符串形式的JS点击事件函数
            "click": "function(gd) {alert('button1')}"
        }
    ]
}

app.layout = html.Div(
    [
        # 将config参数传入dcc.Graph
        dcc.Graph(id="graph-pic", className="graph-pic", figure=fig, config=graph_config)
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True, use_reloader=True)

注意事项：

• 图标部分：如果要使用Plotly内置图标，需要传入对应的SVG路径，也可以替换为自定义SVG路径
• 点击事件：click参数必须传入字符串格式的JavaScript函数，Python会将其传递到前端执行

方法二：使用assets文件夹中的JS配置

如果坚持使用已编写的JS文件，需要修改JS代码，确保它能作用到目标图表上：

1. 修改assets文件夹下的JS文件（例如命名为custom_modebar.js）：

document.addEventListener('DOMContentLoaded', function() {
    // 延迟执行，确保Dash图表已完成渲染
    setTimeout(function() {
        // 通过ID获取目标图表元素
        var graphElement = document.getElementById('graph-pic');
        if (graphElement) {
            // 应用自定义ModeBar配置
            Plotly.react(
                graphElement,
                graphElement.data,
                graphElement.layout,
                {
                    modeBarButtonsToAdd: [
                        {
                            name: 'button1',
                            icon: Plotly.Icons.pencil,
                            direction: 'up',
                            click: function(gd) {alert('button1')}
                        }
                    ]
                }
            );
        }
    }, 1000);
});

2. Python代码无需修改，Dash会自动加载assets文件夹中的JS文件，执行后为目标图表添加自定义按钮。

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