Angular JS 中使用 HighCharts 实现的图形的两种方式数据绑定答案

【问题标题】：Two way data binding in Angular JS for graphs implemented using HighChartsAngular JS 中使用 HighCharts 实现的图形的两种方式数据绑定
【发布时间】：2017-04-27 07:32:43
【问题描述】：

我正在尝试在 AngularJS 中为 HighCharts 编写一个指令，它支持两种方式的数据绑定。单击 HTML 中的函数时，我正在尝试使用新数据加载图表。

请检查以下片段。

HTML：

<hc-area-chart data="areaData"></hc-area-chart>
<button ng-click="updateGraph()">Update function</button>

控制器：

 angular.module('myModule', [])
        .directive('hcAreaChart', function () {
            return {
                restrict: 'E',
                template: '<div></div>',
                scope: {
                    title: '@',
                    data: '='
                },
                link: function (scope, element) {
                    Highcharts.chart(element[0], {
                        chart: {
                            type: 'area'
                        },
                        title: {
                            text: null
                        },
                        xAxis: {
                            categories: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
                        },

                        plotOptions: {
                            pointStart: 4,
                        },
                        series: [{
                            showInLegend: false,
                            data: scope.data

                        }]
                    });
                }
            };
        })
        .controller('myController', function ($scope) {
            $scope.areaData = [0,6,5,7,5,4.5,10];

            $scope.updateGraphData = function () {
                console.log("inside update function");
                $scope.areaData = [10,20,30,40,50,60,70];
            }
        });

【问题讨论】：

标签： angularjs highcharts 2-way-object-databinding

【解决方案1】：

我认为你应该尝试这样的事情

      link: function (scope, element) {

            scope.$watch('data', function(){

                Highcharts.chart(element[0], {
                    chart: {
                        type: 'area'
                    },
                    title: {
                        text: null
                    },
                    xAxis: {
                        categories: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
                    },

                    plotOptions: {
                        pointStart: 4,
                    },
                    series: [{
                        showInLegend: false,
                        data: scope.data

                    }]
                });

              })
            }

【讨论】：