用phantomjs將highcharts極座標圖導出爲PDF

我正在評估客戶項目的highcharts，並遇到了使用phantomjs呈現極座標圖的問題。圖表線條以濃密的灰色斑點出現！我認爲這是由於動畫，但那關閉。將嘗試和張貼圖像，但任何人有任何想法可能會導致這一點？如果我從chrome打印預覽，它也看起來不錯。用phantomjs將highcharts極座標圖導出爲PDF

這是image。

這是我使用phantomjs附帶的rasterize.js腳本構建的報告的一部分。所有其他圖表都很好，極地圖表是唯一沒有出現的圖表。如果我使用帶有phantomjs的highcharts導出服務器腳本，它可以正常工作 - 但只允許將1個圖表導出爲PDF。我需要將整個網頁導出爲包含一些圖表的PDF文件。

來源

2013-04-18 nic_lsf

您可以嘗試禁用該圖表的工具提示（'tooltip.enabled = false'）和鼠標跟蹤（'enabledMouseTracking = false'）。 –

做到了！出色的工作，謝謝帕維爾。 –

有對項目的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);

你可以即使您無法訪問包含圖形的頁面源，也可以使用它來抓取圖形。

來源

2013-06-04 08:58:21 BlaM

用phantomjs將highcharts極座標圖導出爲PDF

回答

相關問題