允许使用 plotly js 以不同格式导出

Question

Plotly 允许通过单击“相机”小按钮来导出图形。可以使用以下配置定义格式：

  config: {
    responsive: true,
    displayModeBar: true,
    staticPlot: true,
    toImageButtonOptions: {
      format: 'svg', // one of png, svg, jpeg, webp
      height: 500,
      width: 700,
      scale: 1 // Multiply title/legend/axis/canvas sizes by this factor
    }
  }

我想为我们的用户推荐不同的绘图格式（svg 和 png）导出格式。看起来导出只允许 1 个值，有什么方法可以强制它提出多种格式？

Answer 1

您所指的配置只是设置默认的下载/屏幕截图按钮。

对于自定义下载格式，您需要创建自定义按钮并多次运行 Plotly.toImage() 以检索所有数据 url。

在此示例中，您会看到简单的 <a> 元素，因为它们提供了通过数据 url 创建下载的简单选项。

<a 
    download="chart.jpg" 
    href="" class="download download-jpg" 
    data-format="jpeg" 
    data-dimensions="640x480">
        Download jpg
</a>  

输出格式和尺寸由数据属性定义。

var trace1 = {
    x: [0, 1, 2, 3, 4, 5, 6],
    y: [1, 9, 4, 7, 5, 2, 4],
    mode: 'markers',
    marker: {
        size: [20, 40, 25, 10, 60, 90, 30],
    }
};

var data = [trace1];

var layout = {
  legend: {
    y: 0.5,
    traceorder: 'reversed',
    font: {size: 16},
    yref: 'paper'
  }};
  

Plotly.newPlot('graph', data, layout);

var myPlot = document.getElementById('graph');
var btns = document.querySelectorAll('.download');
if(btns.length){
    for(var i=0; i<btns.length; i++){
        let thisbtn = btns[i];
        let dataType = thisbtn.getAttribute('data-format');
        let imgDimensions = thisbtn.getAttribute('data-dimensions');
        let H = 800;
        let W = 600;
                    
        if(imgDimensions.indexOf('x')!==-1){
            let dimArr = imgDimensions.split('x');
             H = +dimArr[0];
             W = +dimArr[1];
        }
        Plotly.toImage(myPlot, 
        {format: dataType, width: H, height: W}).then(function(dataUrl) {
            var downloadBtn = document.querySelector('[data-format="'+dataType+'"]');
                downloadBtn.href=dataUrl;
        })  
    }
}

.download {
border: 1px solid #ccc;
padding: 0.3em;
text-decoration:none;
display:inline-block;
}

<script src="https://cdn.plot.ly/plotly-1.34.0.min.js"></script>
  <div id="graph"></div>
  <p class="downloads">
    <a download="chart.jpg" href="" class="download download-jpg" data-format="jpeg" data-dimensions="640x480">Download jpg</a>  
    <a download="chart.png" href="" class="download download-png" data-format="png" data-dimensions="800x800">Download png</a>
    <a download="chart.svg" href="" class="download download-svg" data-format="svg" data-dimensions="900x600">Download svg</a>
  </p>