Angular.js，Highcharts，Phantomjs PDF打印機-圖形未顯示

Question

我有一個很奇怪的問題。 我有一個使用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服務沒有問題。

任何想法如何解決這種尷尬的情況？ 謝謝。

Answer 1

因此，最終的幫助是在指令中對scope.series對象進行了深入的克隆 。

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

對我來說，這是一種尷尬的解決方案，但至少現在可以使用了。