wicked_pdf宝石+高图 [英] wicked_pdf gem + Highcharts
问题描述
我读了一些答案，但没有解决我的问题.
I read some answers, but didnt solve my problem.
HTML图表效果很好，但是当我使用wicked_pdf图表导出到PDF时，则不会显示.
Html charts works good, but when I export to PDF with wicked_pdf charts doesnt show.
我设置图表选项:
plotOptions: {
series: {
enableMouseTracking: false,
shadow: false,
animation: false
}
},
并尝试延长javascript的时间.
And tried giving javascript delay.
根据我阅读的一些帖子，我尝试再次在布局中包括和不包括jquery和/或highcharts js文件.
I tried including and not including in my layout the jquery and/or highcharts js files again according to some posts I read.
但是对我来说什么都没有用，我的wkhtmltopdf库版本是:
But nothing is working for me , my wkhtmltopdf library version is :
wkhtmltopdf 0.12.2.1 (with patched qt)
我阅读的所有答案都超过2岁，因此也许有人可以用一种更新的方法来帮助我.
All answers I read are 2+ years old so maybe someone can help me with a newer method.
推荐答案
最终解决.
没有必要采取某些步骤，但是无论如何我都会注意到这对大多数人有帮助:
Some steps were not necessary, but I will note it anyways to help the most people :
1.-更改wkhtmltopdf版本，我使用的是0.12，现在我已安装
1.- Change wkhtmltopdf version, I was using 0.12 , now I installed
gem 'wkhtmltopdf-binary'
此gem可与0.9版本的wkhtmltopdf一起使用
This gem works with 0.9 version of wkhtmltopdf
2.-从Highcharts中删除动画和其他内容.似乎也不需要它，但是更好的是，我要在本地进行测试，而动画之类的东西会增加无法及时绘制完整图表的风险.
2.- Remove animation and other stuff from Highcharts. Seems like works without it too, buts its better to be sure, I'm testing locally and things like animation increases the risk of not rendering the complete chart in time.
将此配置添加到图表容器文件:
Add this config to charts container file :
plotOptions: {
series: {
enableMouseTracking: false,
shadow: false,
animation: false
}
},
****注意:检查是否已经在图表的另一部分中设置了plotOptions，是否已经将线条添加到现有的plotOptions中，如果您编写了两次，将无法正常工作.***
****Note : check if you already set plotOptions in another part of your chart, if you already did just add the lines to the existent plotOptions , if you write it twice it wont work.***
3.-将HTML结构添加到布局html文件中，请记住wicked_pdf无法看到您的资产管道.
3.- Add HTML structure to the layout html file, remember that wicked_pdf can't see your assets pipeline.
<HTML>
<HEAD> scripts </HEAD>
<BODY> charts and text </BODY>
</HTML>
4.-在PDF布局视图(HEAD标签)中同时包含内部和外部JS文件(如果有的话，还包括CSS文件)，在我的情况下，我使用js文件存储图表模板并生成动态图表，如下所示:
4.- Include both internal and external JS files (include CSS files if you have) in the PDF layout view (HEAD tag), in my case I used js files to store my chart templates and generate dynamic charts like this :
<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" %>
希望这会有所帮助，此答案结合了一些简短且解释较少的解决方案.
Hope it helps, this answer combines some short and less explained solutions.
致谢
这篇关于wicked_pdf宝石+高图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
