Angular.js、Highcharts、Phantomjs PDF 打印机 - 图表未显示答案

【问题标题】：Angular.js, Highcharts, Phantomjs PDF printer - graphs not showing upAngular.js、Highcharts、Phantomjs PDF 打印机 - 图表未显示
【发布时间】：2015-09-06 22:47:52
【问题描述】：

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

图表是使用自定义指令生成的。简化代码：

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 服务没有问题。

知道如何解决这种尴尬的情况吗？谢谢。

【问题讨论】：

听起来你的DATA_LOAD_SUCCESS 事件应该设置scope.series 但不是吗？在将其分配给 chartOptions.series 之前尝试记录它，看看它是否包含预期的数据。
好吧，scope.series 是由控制器设置的。数据就在那里，即使我将它们记录在控制台中...... :(
在浏览器中，是的，但我的意思是通过 Phantomjs。因为那是它缺失的地方，如果我理解正确的话？
@Jan 我尝试使用 Phantomjs 将其注销。 scope.series 属性在那里并且填充了正确的数据。
也许 create 命令在DATA_LOAD_SUCCESS 事件有时间触发之前就被触发了？还是在图表有时间正确渲染之前？我不知道，在这里抓着稻草，但如果数据相同，那么另一件事可能不同的是命令的时间和顺序。如果我是你，我会尝试为自己设置一个 MCVE。只需删除代码，直到你让它工作，然后看看你删除了什么以及它是如何工作的。

标签： javascript angularjs pdf highcharts phantomjs

【解决方案1】：

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

var series = JSON.parse(JSON.stringify(scope.series));

对我来说，这是一种尴尬的解决方案，但至少它现在有效。

【讨论】：

最后一件事，您能否将您的“克隆”对象与原始对象进行比较，看看它们是否完全相同？因为这并不是真正的深度克隆，除非scope.series 完全可序列化为 JSON。否则，如果两者之间唯一的不同是新的指向不同的对象，那么您可能正在代码中的其他地方修改/清除scope.series。从而使chartOptions.series 属性的内容无效。