Highcharts页面上的图表使用wkhtmltopdf不正确渲染时输出为PDF(Highchar

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

我曾尝试用于解决其他问题的堆栈，即所有设置的一系列以下这个问题的技巧：

enableMouseTracking: false,
shadow: false,
animation: false

......以及那些设置在列/花键。没运气。

这里是一个浏览器页面的图片链接。

这里是一个到PDF输出的图像链路。

这里是一个对我的图表选项要旨链接前两个图表。

这是所有的Linux操作系统Ubuntu安装在VirtualBox的客人12.04，采用了最新的Highcharts下载的前两天和wkhtmltopdf 0.10.0_rc2版本。到wkhtmltopdf的调用主要是通过在Rails 3应用程序的PDFKIT宝石去，但我已经直接调用wkhtmltopdf具有相同的结果在命令行上。

TIA的任何帮助！

更新：

我已经分离出的问题到HTML的一个特定摘录图表之前出现。我使用的Twitter的引导CSS / javascript框架，此代码产生一组按钮：

<div class='btn-group' data-toggle='buttons-radio'>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2012">2012</button>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2011">2011</button>
  <button class="filterButton btn btn-primary selected" data-filter="school_year" data-group="dr_filter" data-value="2010">2010</button>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2009">2009</button>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2008">2008</button>
</div>

具体来说，它是造成问题的.btn组标签的存在 - 身上拿走，离开一切如，和PDF生成相同的页面显示没有注意到的问题。此外，如果您将这个片段的图表后，页面上的任何地方，一切正常。

我进一步隔离问题到实际的HTML / CSS，因为这个问题依然存在，当我完全禁用引导JavaScript函数。

Answer 1:

有报道wkhtmltopdf一个问题，这是非常相似的情况。参见问题689 。 Wkhtmltopdf不能正确处理透明度/阴影，并可能导致不可预知的结果。

除去在SVG的所有行程，不透明度属性和与透明度属性替换它们，您把它送到wkhtmltopdf之前。这段代码就可以了。

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);
}

Answer 2:

尝试通过选择JavaScript的迪利

wkhtmltopdf --quiet --page-size letter --encoding UTF-8 --javascript-dealy 5000 - -

或者，如果你正在使用pdfkit宝石/库尝试在HTML代码中添加以下行

 <meta content="5000" name="pdfkit-javascript-delay"/>