Question

我有一个非常奇怪的问题。我有一个Angular.js应用程序，它利用Highcharts作为图形渲染库。此应用程序必须支持打印到PDF，这是使用我们公司使用的Phantomjs PDF服务完成的。

使用custom指令生成图表。简化代码：

app.directive('metricsChartMulti', [
    function () {
        return {
            ...
            link: function postLink(scope, element, attrs) {

                ...

                // plot data after they are loaded
                scope.$on('DATA_LOAD_SUCCESS', function() {

                    var chartOptions = {
                        series: scope.series
                        ...
                    };

                    var chart = new Highcharts.Chart(chartOptions);

                });
            }
        }
    }
]);

系列数据（scope.series）在控制器中准备，并将它们添加到范围中。一切都在浏览器中完美运行，没有错误。但是，当我调用基于Phantomjs2的PDF创建服务时，图形不会在返回的PDF文件中呈现。

我试图在代码中发现错误，但我相信我使用Angular框架的常见最佳实践创建了应用程序。经过长时间的调试后，我发现当我将scope.series更改为静态模拟数据时，PDF正确绘制。

在浏览器（Chrome，Firefox）中，这没有任何明显的变化。

我还尝试直接从Highcharts网站使用不同的URL生成PDF，并正确创建PDF。对我而言，这意味着公司的PDF服务没有问题。

知道如何理清这种尴尬局面吗？谢谢。

Answer 1

所以最终帮助的是指令中scope.series对象的深度克隆。

.container div{
 margin-right:4px;   
 margin-left:0 !important;    
}
.container div:nth-of-type(1){
 margin-left:4px !important; 
}

对我而言，这是一种尴尬的解决方案，但至少它现在正在运作。

Angular.js，Highcharts，Phantomjs PDF打印机 - 图形未显示

1 个答案: