Question

我正在使用css2pdf @ cloudformatter将我的plotly.js svg导出为pdf。它工作得很好，但它不会导出热图的颜色条。我使用“srctype：'svg'”选项将svg保存为我网站上的格式。请看一下小提琴http://jsfiddle.net/rk9540x5/4/

这是脚本：

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xeponline.jqplugin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>
<br><br>
<!-- Source and on-click event for plotly.js -->
<div id="plotly_chart" style="width: 90%; height: 270px"></div>
<button onclick="return xepOnline.Formatter.Format('plotly_chart',{render:'download',srctype:'svg' });">Get  PDF</button>

<script type="text/javascript">
Chart = document.getElementById('plotly_chart');

var data = [
{
z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
type: 'heatmap'
}
];

Plotly.newPlot('plotly_chart', data);
</script>

我在没有“srctype：'svg'”选项的情况下测试了它，并且这也导出了颜色条和图表，但输出看起来不再像网页上的情节：颜色条被绘制在热图下方。这表明css2pdf将div识别为两个独立的svg元素 - 一个用于热图，另一个用于颜色条。

它还在cloudformatter.com主页（http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage）上说“如果使用srctype：'svg'选项，则包含div中的第一个svg元素将被单独格式化”。我该如何解决这个问题？有没有办法将colorbar svg元素移动到heatmap svg元素中？这是DOM的图像 - 你可以看到有两个不同的svg＃s，“infolayer”代表colorbar svg。

我已经尝试过以下方法将颜色条添加到情节图表中，但它没有帮助：

var colorbar = {
   title: test,
   titlefont: {
     size: 12,
   },
   titleside: "top",
   thickness: 20,
   nticks: ticknumber,
   tickfont: {
     size:10.5
   },
   outlinewidth: 0,
   xpad: 1,
   ypad:3
   };    
Plotly.newPlot('plotly_chart', data).append("colorbar");

感谢您帮助解决此问题！

如何将整个div传递给XEPOnline.js库而不仅仅是第一个svg元素？

0 个答案: