如何配置Plotly.js实现多格式图表导出功能

API 探路者

2026-9-27

Plotly 原生默认的单个导出相机按钮不支持直接配置多格式选择，你可以通过自定义模式栏按钮的方式添加多个导出按钮，分别对应不同的导出格式实现需求。

实现步骤

先在配置中移除默认的单格式导出按钮，避免功能重复
给模式栏新增多个自定义按钮，每个按钮绑定对应格式的导出逻辑，直接调用官方提供的Plotly.downloadImage方法即可触发对应格式的下载

完整配置示例

const plotConfig = {
  responsive: true,
  displayModeBar: true,
  staticPlot: false, // 需设为false才能显示模式栏
  // 移除原生默认的单格式导出按钮
  modeBarButtonsToRemove: ['toImage'],
  // 添加自定义多格式导出按钮
  modeBarButtonsToAdd: [
    {
      name: '导出PNG',
      icon: Plotly.Icons.camera, // 沿用原生相机图标
      click: function(graphDiv) {
        Plotly.downloadImage(graphDiv, {
          format: 'png',
          height: 500,
          width: 700,
          scale: 1,
          filename: '图表导出'
        })
      }
    },
    {
      name: '导出SVG',
      icon: Plotly.Icons.camera,
      click: function(graphDiv) {
        Plotly.downloadImage(graphDiv, {
          format: 'svg',
          height: 500,
          width: 700,
          scale: 1,
          filename: '图表导出'
        })
      }
    }
  ]
}