使用Angular Directives将数组绑定到highcharts数据部分

时间:2016-07-13 15:04:43

标签: angularjs highcharts

我需要将数据数组绑定到"数据"嵌入的高级图表的一部分 Angular指令,但我不知道如何做到这一点。

这是我的控制器部分,它从存储库中获取数据:

vm.data = [];     
function getVmAll(forceRefresh) {

            return datacontext.esxservers.getAllWithoutPaging(forceRefresh, vm.vmAllSearchTemp)
                .then(function (data) {
                    vm.data= data;

                    });
                    return data;
                }
            );
        }

这是我在其中使用控制器的模板:

    <section class="mainbar" data-ng-controller="mbVirtualizationOverviewCtrl as vm">
    <mb-virtualization-overview-donut-chart value="vm.data"></mb-virtualization-overview-donut-chart>

</section>

最后但并非最不重要的一个是我使用highcharts设置的指令:

'use strict';

angular.module('app').directive('mbVirtualizationOverviewDonutChart', [

    function () {
        return {
            restrict: "E",
            templateUrl: '/app/directives/virtualizationOverview/mbVirtualizationOverviewDonutChartTemplate.html',
            scope: {
                value : "="
            },
            link: function (scope, el, attrs) {

                scope.chart = Highcharts.chart(el[0], {
                    chart: {
                        type: 'pie',
                    },

                    title: {
                        text: scope.innerTitle
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false

                            },
                            showInLegend: true
                        }
                    },
                    series: [{

                        data: undefined
                    }]
                });
                var init = true;
                scope.$watch(
                     function () {
                         var chart = scope.chart;
                         if (init && scope.value.length > 0) {
                             init = false;
                             scope.value.forEach(function (item, index) {
                                 chart.series[0].data.push(item);                               
                             });                            
                         }
                     });
            }
        };
    }
]);

0 个答案:

没有答案