使用wkhtmltopdf输出到PDF时，页面上的Highcharts图表无法正确呈现

我的wkhtmltopdf页面上有几个Highcharts图表的PDF输出缺少图表的某些元素，主要是所有简单的直线，包括刻度线，网格线，列边框，图例边框和线条/样条线图中的线条（数据点显示）。

我尝试过用于解决其他堆栈问题的技巧，即在系列中设置以下所有内容：

enableMouseTracking: false, shadow: false, animation: false 

…以及在列/样条曲线上设置它们。 没运气。

这是指向浏览器页面图像的链接 。

这是pdf输出图像的链接 。

这是前两个图表的图表选项要点的链接 。

这是在安装在VirtualBox客户机上的Linux Ubuntu 12.04上，使用两天前的最新Highcharts下载和wkhtmltopdf版本0.10.0_rc2。 对wkhtmltopdf的调用主要是通过Rails 3应用程序中的PDFKIT gem，但是我在命令行上直接调用了wkhtmltopdf并得到了相同的结果。

TIA任何帮助！

更新：

我已将问题分解为图表之前的特定HTML片段。 我使用Twitter Bootstrap css / javascript框架，这段代码产生一组按钮：

 
 2012 2011 2010 2009 2008  

具体来说，导致问题的是.btn-group标签的存在 – 取走它，将其他所有内容保留原样，并且PDF生成与页面显示相同而没有指出的问题。 此外，如果您将此代码段移动到图表后页面上的任何位置，则一切正常。

我进一步将问题分解为实际的html / css，因为当我完全禁用Bootstrap javascript函数时问题仍然存在。

Answer 1

据报道，wkhtmltopdf存在一个与您的情况非常相似的问题。 见问题689 。 Wkhtmltopdf无法正确处理透明度/阴影，并可能导致不可预测的结果。

在将其发送到wkhtmltopdf之前，删除svg中的所有stroke-opacity属性并将其替换为opacity属性。 这段代码可以解决问题。

 nodes = document.querySelectorAll('*[stroke-opacity]'); for (nodeIter = 0; nodeIter < nodes.length; nodeIter += 1) { elem = nodes[nodeIter]; opacity = elem.getAttribute('stroke-opacity'); elem.removeAttribute('stroke-opacity'); elem.setAttribute('opacity', opacity); }