highcharts - 使用phantomjs将highcharts极坐标图导出为PDF

Question

我正在为一个客户项目评估 highcharts，但在使用 phantomjs 渲染极坐标图时遇到了问题。图表线显示为一个厚厚的灰色 Blob !我以为这是由于动画，但那是关闭的。将尝试发布图像，但有人对其他可能导致此问题的原因有任何想法吗？如果我从 chrome 打印预览，它看起来也不错。

这是image .

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

Answer 1

项目的错误跟踪还有另一种解决方法:

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

即使您无权访问包含图表的页面源，也可以使用它来抓取图表。