如何在Plotly交互式Python图表中添加SVG下载的第二个toImageButton

默认情况下，Plotly的toImageButtonOptions只能配置单个下载按钮的格式，没法直接添加第二个按钮。要实现同时有PNG和SVG两个下载按钮，需要通过自定义工具栏按钮的方式来实现，具体步骤如下：

核心思路 #

利用Plotly配置中的modeBarButtonsToAdd参数，手动添加一个新的下载按钮，指定其下载格式为SVG，并自定义按钮的图标颜色（橙色）。默认的PNG下载按钮会保留，无需额外修改。

完整代码示例 #

import plotly.express as px

# 配置自定义按钮和原有按钮的参数
config = {
    # 保留默认PNG下载按钮的配置（可选，可自定义文件名等）
    'toImageButtonOptions': {
        'format': 'png',
        'filename': 'chart_png',
        'height': 500,
        'width': 700,
        'scale': 2
    },
    # 添加自定义SVG下载按钮
    'modeBarButtonsToAdd': [
        {
            'type': 'download',
            'args': [
                {'format': 'svg'},
                {'filename': 'chart_svg', 'height': 500, 'width': 700, 'scale': 2}
            ],
            # 设置按钮图标和样式：用内置下载图标，颜色设为橙色
            'icon': {
                'width': 20,
                'height': 20,
                'path': "M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z",
                'fill': '#ff7f0e'  # 橙色
            },
            'name': '下载SVG格式'
        }
    ]
}

# 创建示例图表
fig = px.bar(x=[1, 2, 3], y=[1, 3, 1], title="双格式下载按钮示例")

# 渲染图表并应用配置
fig.show(config=config)

代码说明 #

1. 默认PNG按钮配置：通过toImageButtonOptions保留并自定义原有PNG下载按钮的参数（文件名、尺寸等）。
2. 自定义SVG按钮：
   • type: 'download'：指定按钮类型为下载
   • args：第一个参数设置下载格式为svg，第二个参数配置文件名、尺寸等
   • icon：使用Plotly内置的下载图标路径，通过fill设置为橙色；也可以替换为自定义的SVG图标路径
   • name：鼠标悬停时显示的按钮提示文字

效果说明 #

运行代码后，图表工具栏会显示两个下载按钮：

• 原有的默认按钮（灰色）：下载PNG格式
• 新增的橙色按钮：下载SVG格式

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