Question

我试图使用每个图表的单独指令渲染两个单独的图表，因为数据不同（我也不是AngualrJs的专家）。但只有一个图表可供查看。请有人帮忙解决我必须做的事情，这样我就可以看到两个图表。谢谢。

'use strict';

angular.module('AngularApp',['AngularApp.directives']);

/*Controllers*/

 var HighChartController = function HighChartController($scope) {

$scope.templateUrl = '/_layouts/AngularControls/TestController/View2.html';
$scope.type = '107';


$scope.initData = function () {
    $scope.data = [
 ['Fire', 47.0],
 ['Wind', 33.0],
 ['Natural', 20.0]
 ];

}
$scope.loadChart = function () {

    $scope.data1 = [60];
    $scope.data2 = [40];
}

$scope.initData();
$scope.loadChart();
}

 /* Directives */

 angular.module('AngularApp.directives', []).

  directive('drawPieChart', function () {

    return function (scope, element, attrs) {

        var container = $(element).attr("id");
        scope.$watch('data', function () {
            console.log('data');
            drawPlot();
        }, true);

        var drawPlot = function () {
            var chart;
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: container,
                    margin: [0, 0, 0, 0],
                    spacingTop: 0,
                    spacingBottom: 0,
                    spacingLeft: 0,
                    spacingRight: 0
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false
                },

                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 1
                },
                plotOptions: {
                    pie: {
                        size: '100%',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: scope.data
                }]
            });


        }


    }
});

angular.module('AngularApp.directives', []).

directive('drawBarChart', function () {

    return function (scope, element, attrs) {

        var container = $(element).attr("id");
        scope.$watch('data', function () {
            drawPlot();
        }, true);

        var drawPlot = function () {
            var chart = new Highcharts.Chart({
                chart: {
                    type: 'column',
                    renderTo: container,
                    marginRight: 50,
                    events: {

                    }
                },
                title: {
                    text: 'Test Scores',
                    style: {
                        color: 'black',
                        fontWeight: '700',
                        fontFamily: 'Arial',
                        fontSize: 20
                    }
                },
                xAxis: {
                    categories: [],
                    title: {
                        text: null
                    },
                    gridLineWidth: 0,
                    minorGridLineWidth: 0,
                    labels: {
                        style: {
                            color: 'black',
                            fontWeight: '700',
                            fontFamily: 'Arial',
                            fontSize: 11,
                            width: 90
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    gridLineWidth: 0,
                    minorGridLineWidth: 0,
                    labels: {
                        enabled: false
                    },
                    title: {
                        text: null
                    }
                },
                tooltip: {
                    valueSuffix: ' million'
                },
                plotOptions: {
                    series: {
                        stacking: 'percent'
                    },
                    bar: {
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                legend: {
                    enabled: false,
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'bottom',
                    x: -40,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: '#FFFFFF',
                    shadow: true
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: 'null',
                    data: scope.data2,
                    borderRadius: 0,
                    color: "gray"
                }, {
                    name: 'Values',
                    data: scope.data1,
                    color: "green",
                    borderRadius: 0
                }]
            });
        }
    }

});

这是标记

 <div id="barChartContainer" draw-bar-chart =""></div>
 </div>
 <div id="pieChartContainer" draw-pie-chart="">
 </div>

Answer 1

我认为您的问题是您声明了两次模块。

尝试写不

angular.module('AngularApp.directives', []).
directive('drawPieChart'...)

angular.module('AngularApp.directives', []).
directive('drawBarChart'...)

但

angular.module('AngularApp.directives', []).
directive('drawPieChart'...).
directive('drawBarChart'...)

或

var app = angular.module('AngularApp.directives', []);
app.controller('Ctrl', ...)
app.directive('drawPieChart'...);
app.directive('drawBarChart'...);

示例：

http://jsfiddle.net/GDQ6B/2/

http://jsfiddle.net/EYz9U/1/

Answer 2

正如Oledje所提到的那样，你宣布了AngularApp.directives两次，但是在指令代码中实际引用图表数据的方式也存在问题。我建议您为每个指令创建一个独立的范围，并在范围定义中映射图表数据的属性。

所以而不是

  .directive('drawPieChart', function () {

    return function (scope, element, attrs) {

        var container = $(element).attr("id");
        scope.$watch('data', function () {
            console.log('data');
            drawPlot();
        }, true);

        var drawPlot = function () {...};
     };
  }

你应该做

  .directive('drawPieChart', function () {

    return {
       restrict: 'E',
       scope: {
           chartData: "="
       },
       link: function (scope, element, attrs) {

         scope.$watch('chartData', function (newVal,oldVal) {
             if (newVal) {
                  drawPlot();
             }
         }, true);
         var drawPlot = function () {
             // use scope.chartData for the data
         };
       }
    };
  }

然后你还需要相应的HTML

<draw-pie-chart chart-data="pieChartData">

在您的Controller中执行$scope.pieChartData=[];

这是一个包含我所有更改的jsFiddle：http://jsfiddle.net/callado4/9far5/5/（查看历史记录以了解我的进展情况）

使用angular js指令渲染两个图表单独的图表

2 个答案: