0

我目前将此作为我的指令：

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

})

这是我的控制器：

function ProdSvcViewsCtrl($scope, $routeParams, $http, $location) {
$scope.example_chart = get_chart();

function get_chart() {
    return {
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                name: 'Page Views',
                color:'#FFFFFF',
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            alert('Category: ' + this.category + ', value: ' + this.y);
                        }
                    }
                },
            }
        },

        chart: {
            renderTo: 'container',
            backgroundColor : {
                linearGradient : [0, 0, 0, 400],
                stops : [
                  [0, 'rgb(100, 100, 100)'],
                  [1, 'rgb(50, 50, 50)']
                ]
            },
            plotBackgroundColor: 'rgba(255, 255, 255, 0.1)',
            width: 775,
            height: 300,
        },
        title: {
            text: "Product Page Views",
            align: "center",
            y: 15,
            style: {
                color: "#ffffff",
                fontSize: "18px",
                fontWeight: 500,
                fontFamily:'Calibri,Helvetica,Arial'
            }
        },
        legend: {
            backgroundColor: 'transparent',
            color:'#FFFFFF',
            layout: 'horizontal',
            floating: true,
            align: 'left',
            verticalAlign: 'top',
            x: 60,
            y: 1,
            shadow: false,
            border: 0,
            borderRadius: 0,
            borderWidth: 0
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    };
}

}

我如何将属性从我的控制器迁移到指令，以便它们可以是动态的，具体取决于我应用于相应指令的属性，即颜色、宽度等？

4

1 回答 1

1

在您的指令中，您可以将手表添加到您想要动态的图表部分。

这是该指令采用的方法：https ://github.com/pablojim/highcharts-ng

于 2014-02-15T19:10:31.460 回答