用幻灯片将高分辨率极坐标图导出为PDF [英] exporting highcharts polar chart to PDF with phantomjs

问题描述

我正在评估一个客户项目的highcharts，并且遇到了一个用phantomjs渲染极坐标图的问题。图表线条以浓密的灰色斑点出现！我认为这是由于动画，但那关闭。将尝试和张贴图像，但任何人有任何想法可能会导致这一点？如果我从chrome打印预览，它也看起来很好。

以下是图片。

这是作为零件创建的我使用phantomjs中包含的rasterize.js脚本构建的报告。所有其他图表都很好，极地图表是唯一没有出现的图表。如果我使用带有phantomjs的highcharts导出服务器脚本，它可以正常工作 - 但只允许将1个图表导出为PDF。我需要将整个网页导出为包含一些图表的PDF文件。

解决方案

还有另外一个解决项目bug追踪的方法： / p>

https：// github .com / ariya / phantomjs / issues / 10364＃issuecomment-14992612

您只需在呈现之前移除所有透明度较低的页面元素file：

  diff --git a / examples / rasterize.js b / examples / rasterize.js 
 index fcd74cd ..dcc81d4 100644 
 --- a / examples / rasterize.js 
 +++ b / examples / rasterize.js 
 @@ -19,6 +19,16 @@ if（ phantom.args.length< 2 || phantom.args.length> 3）{
 console.log（'Unable to load the address！'）; 
} else {
 window.setTimeout（function（）{
 + //移除所有不透明度较低的路径，参见PhantomJS issue＃364 
 + page.evaluate（function（） {
 + var paths = document.getElementsByTagName（path）; 
 + for（var i = paths.length  -  1; i> = 0; i--）{
 + $ path = path [i]; 
 + var strokeOpacity = path.getAttribute（'stroke-opacity'）; 
 + if（strokeOpacity！= null&&strokeOpacity <0.2）
 + path.parentNode.removeChild（path）; 
 +} 
 +}）; 
 page.render（输出）; 
 phantom.exit（）; 
 }，200）; 
  

即使您无法访问页面的源代码，也可以使用它来获取图表包含图表。

I'm evaluating highcharts for a client project and have run into a problem rendering a polar chart with phantomjs. The charts lines come out as a thick grey blob! I thought this was due to animation but thats turned off. Will try and post an image but anyone have any thoughts on what else could be causing this? If I print preview from chrome it also looks ok.

Here's the image.

This was created as part of a report which I built using the rasterize.js script included with phantomjs. All the other charts work fine, the polar chart is the only one not coming out. If I use the highcharts export server script with phantomjs it works fine - but that only allows for 1 chart to be exported to PDF. I need to export a whole web page as a PDF including some charts.

解决方案

There's another workaround on the project's bug tracking:

https://github.com/ariya/phantomjs/issues/10364#issuecomment-14992612

All you need to do is to remove all page elements with low opacity before rendering to file:

diff --git a/examples/rasterize.js b/examples/rasterize.js
index fcd74cd..dcc81d4 100644
--- a/examples/rasterize.js
+++ b/examples/rasterize.js
@@ -19,6 +19,16 @@ if (phantom.args.length < 2 || phantom.args.length > 3) {
             console.log('Unable to load the address!');
         } else {
             window.setTimeout(function () {
+                // Remove all low-opacity paths. see PhantomJS  issue #364 
+                page.evaluate(function () {
+                    var paths = document.getElementsByTagName("path");
+                    for (var i = paths.length - 1; i >= 0; i--) {
+                        var path = paths[i];
+                        var strokeOpacity = path.getAttribute('stroke-opacity');
+                        if (strokeOpacity != null && strokeOpacity < 0.2)
+                            path.parentNode.removeChild(path);
+                    }
+                });
                 page.render(output);
                 phantom.exit();
             }, 200);

You can use that to grab graphs even if you don't have access to the source of the page containing the graph.

这篇关于用幻灯片将高分辨率极坐标图导出为PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！