wicked_pdf gem + Highcharts答案

【问题标题】：wicked_pdf gem + Highchartswicked_pdf gem + Highcharts
【发布时间】：2016-03-20 09:21:21
【问题描述】：

我阅读了一些答案，但没有解决我的问题。

Html 图表效果很好，但是当我使用 wicked_pdf 图表导出为 PDF 时不显示。

我设置图表选项：

 plotOptions: {
      series: {
        enableMouseTracking: false,
        shadow: false, 
        animation: false
      }
    },

并尝试给 javascript 延迟。

根据我阅读的一些帖子，我尝试在布局中再次包含或不包含 jquery 和/或 highcharts js 文件。

但是对我没有任何作用，我的 wkhtmltopdf 库版本是：

wkhtmltopdf 0.12.2.1 (with patched qt)

我阅读的所有答案都是 2 岁以上，所以也许有人可以用更新的方法帮助我。

【问题讨论】：

你在图表上看到什么了吗？喜欢标题还是图例？如果不是，那么这不是动画的问题。 wicked_pdf 和渲染 SVG 有一些问题，不需要连接到 Highcharts 库本身，你检查过吗？例如this bug report.

标签： javascript jquery ruby-on-rails highcharts

【解决方案1】：

终于解决了。

有些步骤是不必要的，但无论如何我都会记下它以帮助大多数人：

1.- 更改 wkhtmltopdf 版本，我使用的是 0.12 ，现在我安装了

gem 'wkhtmltopdf-binary'

此 gem 可与 0.9 版本的 wkhtmltopdf 一起使用

2.- 从 Highcharts 中删除动画和其他内容。似乎没有它也可以工作，但最好确定一下，我在本地进行测试，而动画之类的东西会增加无法及时渲染完整图表的风险。

将此配置添加到图表容器文件中：

plotOptions: {
  series: {
    enableMouseTracking: false,
    shadow: false, 
    animation: false
  }
},

****注意：检查您是否已经在图表的另一部分设置了 plotOptions ，如果您已经将线条添加到现有的 plotOptions ，如果您写了两次它就不起作用了。***

3.- 将 HTML 结构添加到布局 html 文件中，记住 wicked_pdf 看不到您的资产管道。

<HTML>
<HEAD> scripts </HEAD>
<BODY> charts and text </BODY>
</HTML>

4.- 在 PDF 布局视图（HEAD 标记）中包括内部和外部 JS 文件（如果有的话，包括 CSS 文件），在我的例子中，我使用 js 文件来存储我的图表模板并生成如下动态图表：

   <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/heatmap.js"></script>
    <%= wicked_pdf_javascript_include_tag "chart_templates/chart_bar_combined" %>

希望对您有所帮助，此答案结合了一些简短且解释较少的解决方案。

问候

【讨论】：

如果这对您不起作用，请在此处查看我的答案：stackoverflow.com/a/53008582/1296209