允许使用绘图js以不同格式导出
允许使用绘图js以不同格式导出
提问于 2021-11-03 13:37:41
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个值，有没有办法强制它提出多个格式？
回答 1
Stack Overflow用户
发布于 2021-11-03 23:19:25
您所指的配置只是设置了默认的下载/截图按钮。
对于自定义下载格式，您需要创建自定义按钮并多次运行Plotly.toImage()来检索所有数据urls。
在本例中，您可以看到简单的<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69825869
复制相关文章
相似问题
腾讯云开发者
