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' 
    ], []] 
})