Plotly.js模式栏，以PNG形式下载，给PNG一个名字

Question

我在我的网页上有一个Plotly，你可以通过点击模式栏中的图片图标作为PNG下载它。但是，当我点击它时，它将它作为名称为new-plot的png下载，我如何给它一个自定义名称？

我当前的代码（VAR数据仅仅是数据，所以留出来）：

var layout = { 
    showlegend: true, 
    legend: { 
     x: 0, 
     y: 1 
    }, 
    xaxis: { 
     title: 'Date', 
     titlefont: { 
      family: 'Courier New, monospace', 
      size: 18, 
      color: '#7f7f7f' 
     } 
    }, 
    yaxis: { 
     title: 'Sales', 
     titlefont: { 
      family: 'Courier New, monospace', 
      size: 18, 
      color: '#7f7f7f' 
     } 
    } 
}; 

var options = { 
    scrollZoom: true, 
    showLink: false, 
    modeBarButtonsToRemove: ['zoom2d', 'pan', 'pan2d', 'sendDataToCloud', 'hoverClosestCartesian', 'autoScale2d'], 
    displaylogo: false, 
    displayModeBar: true, 
}; 

Plotly.newPlot('tester', data, layout, options); 

Answer 1

使用Plotly.downloadImage

https://plot.ly/javascript/plotlyjs-function-reference/#plotlydownloadimage

给你的modebar设置添加按钮回调：

Plotly.downloadImage({ 
    filename: 'customNamedImage', 
    format: 'png', //also can use 'jpeg', 'webp', 'svg' 
    height: 500, 
    width: 500 
}); 

Edi T：

我跑了一个自定义的例子，我想你会想custimze在modebar 自己下载按钮，就像这样：

Plotly.newPlot(gd, [{ 
    y: [1, 2, 1], 
    line: { shape: 'spline' } 
}], { 
    title: 'custom modebar button', 
    width: 400, 
    height: 700 
}, { 
    showTips: false, 
    displayModeBar: true, 
    modeBarButtons: [[{ 
    name: 'custom download button', 
    icon: Plotly.Icons.camera, 
    click: function (gd) { 
     Plotly.downloadImage(gd, { 
     filename: 'your_custom_name', 
     format: 'jpeg', 
     width: gd._fullLayout.width, 
     height: gd._fullLayout.height 
     }) 
    } 
    }, 'toImage' 
    ], []] 
})