2013-04-18 57 views
5

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

这是image

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

+3

您可以尝试禁用该图表的工具提示('tooltip.enabled = false')和鼠标跟踪('enabledMouseTracking = false')。 –

+0

做到了!出色的工作,谢谢帕维尔。 –

回答

6

有对项目的bug跟踪另一个解决办法:

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

所有你需要做的就是渲染到文件之前移除具有低透明度的所有页面元素:

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

你可以即使您无法访问包含图形的页面源,也可以使用它来抓取图形。