使用angularjs指令渲染两个图表单独的图表-RenderTwochartsseparatechartsusingangularjsdirectives

作者：饱和深潜者_463 | 来源：互联网 | 2023-09-18 20:28

Iamtryingtorendertwoseperatechartsusingseperatedirectivesforeachcharts,sincethedata

I am trying to render two seperate charts using seperate directives for each charts, since the data is different ( also I am no expert in AngualrJs ). But only one chart was rendering to view. Please can someone help with what I have to do so that I can see both charts.Thanks.

我试图为每个图表使用单独的指令渲染两个单独的图表,因为数据不同(我也不是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}: {point.percentage}%',
                    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
                }]
            });
        }
    }

});

Here is the markup

这是标记

2 个解决方案

#1

As Oledje mentioned, you declared the AngularApp.directives twice, but there was also an issue with how you are actually referencing the data for the charts in the directive code. I would recommended that you create an isolated scope for each directive and map the properties for the chart data in the scope definition.

正如Oledje所提到的,你已经两次声明了AngularApp.directives,但是在指令代码中实际引用图表数据的方式也存在问题。我建议您为每个指令创建一个隔离的范围,并在范围定义中映射图表数据的属性。

So instead of

而不是

  .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 () {...};
     };
  }

You should do

你应该做

  .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
         };
       }
    };
  }

And then you also need the corresponding HTML

然后你还需要相应的HTML

And in your Controller do $scope.pieChartData=[];

在你的Controller中做$ scope.pieChartData = [];

Here is a jsFiddle with all of my changes: http://jsfiddle.net/callado4/9far5/5/ (look at the history to see how I progressed)

这是一个jsFiddle与我的所有变化:http://jsfiddle.net/callado4/9far5/5/(看历史,看看我如何进步)

#2

I think that your problem is that you declare a module twice.

我认为你的问题是你宣布一个模块两次。

try write not

试着不写

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

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

but

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

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

Examples:

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

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