javascript - Highchart Angular Directive(指令)不会从动态(ajax)数据表中重绘

Question

我有一个 AngularJs 应用程序，它从 API 检索数据并将它们填充到表中。然后，我使用 Highcharts 根据该表绘制图表。如果我在表中使用静态数据，它工作正常，但当我通过 AJAX 更新表时它不起作用。它不会重绘。

指令:

app.directive('highChart', function ($parse) {
    return {        
        link: function(scope, element, attrs) {
            scope.$watch('chartConfig', function (newVal) {
                if (newVal) {
                    var props = $parse(attrs.highChart)(scope);
                    props.chart.renderTo = element[0];
                    new Highcharts.Chart(props);
                }
            });
        }
    };
});

Controller :

appControllers.controller('SummaryController', ['$scope', '$timeout', 'Summaries',
    function ($scope, $timeout, Summaries) {
        // Request from API
        Summaries.get({ table: 'level'}).$promise.then(
            // success callback
            function(data) {
                $scope.levels = data.level[0][today];
                $scope.chartConfig = {
                    data: {
                        table: document.getElementById('daily-level')
                    },
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Data extracted from a HTML table in the page'
                    },
                    yAxis: {
                        allowDecimals: false,
                        title: {
                            text: 'Units'
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                                this.y + ' ' + this.x;
                        }
                    }
                 };
            }
    }]);

HTML

<div id="top-chart" high-chart="chartConfig"></div>

它只显示一个空图表。我的表确实被 AJAX 请求更新了。我什至在指令中检查了 console.log(props) 并且 props.data.table 确实显示了更新后的表格，但不知何故图表没有重绘。我尝试了多种方法来做到这一点，但都归结为相同的结果。目前，我只是使用 jQuery 超时来刷新图表，它有效，但这意味着我在 Controller 内部使用 DOM 操作。我正在尝试使用指令来实现这一目标。

Answer 1

好的。我设法让它工作。我认为问题是，Highcharts 不知道这些变化，或者如果它知道这些变化，那一刻的 DOM 还没有完成渲染。这是代码的工作版本。

指令:

app.directive('highchart', function($parse, $timeout) {
    return {
        restrict: 'E',
        template: '<div></div>',
        replace: true,
        link: function(scope, element, attrs) {
            var config = $parse(attrs.config)(scope);
            $(element[0]).highcharts(config);

            scope.$watch(attrs.watch, function(newVal) {
                if (newVal) {
                    var complete = function (options) {
                        var chart = $(element[0]).highcharts();
                        // capture all available series
                        var allSeries = chart.series;
                        for (var i = 0; i < allSeries.length; i++) {
                            allSeries[i].setData(options.series[i].data, false);
                        }

                        chart.redraw();
                    };

                    // doesn't work without the timeout 
                    $timeout(function() {
                        Highcharts.data({
                            table: config.data.table,
                            complete: complete
                        });   
                    }, 0);
                }
            });
        }
    };
});

在 Controller 中，我们可以设置配置。

    $scope.chartConfig = {
         // config here
    };

使用方法:

<highchart config="chartConfig" watch="levels"></highchart>

属性 config 绑定(bind)到 $scope.chartConfig 而 watch 是 watch.$scope( ) 在指令中。当 Controller 中的 $scope.levels 发生变化时，它会重新渲染图表。

我实际上不喜欢指令对我现在拥有的 watch 属性的依赖性，但我不确定什么是最好的或其他方法来做到这一点。如果有人有更好的主意，请告诉我。

请注意，这仅适用于将表格转换为 Highcharts 。对于其他人，您可能需要使用其他 angularjs highcharts 指令。