Как вызвать круговую диаграмму d3 по нажатию кнопки в angularjs? - PullRequest
Новая
       36

Как вызвать круговую диаграмму d3 по нажатию кнопки в angularjs?

0 голосов
/ 23 октября 2019

Я пытаюсь отобразить круговую диаграмму, используя диаграммы d3.js в angularjs. Что касается примеров, которые я видел до сих пор, реализует круговую диаграмму нагрузки. Но здесь я хочу отобразить круговую диаграмму на основе ответа от сервиса, который вызывается нажатием кнопки. Нужно некоторое руководство, чтобы начать

my user.html 

<h1>Group by users</h1><br>
<select name="users" id="search" ng-model="searchItem">
<option value="">Search By</option>
<option value="admin">admin</option>
<option value="superAdmin">superAdmin</option>

</select>

<button ng-click="search()">Search</button>
<div pie-chart="" style="width:100%;height:460px;" data="data"></div>

my user.js 

'use strict';

 angular.module('myApp.employee',['ngRoute'])

 .config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/employee', {
  templateUrl: 'employee/employee.html',
  controller: 'EmployeeCtrl'
  });
    }])

   .controller('EmployeeCtrl', ['$scope','$http',function($scope,$http) {
    $scope.search = function(){

    var   search=angular.element(document.getElementById("search"));  
    //var data ;    

    $scope.searchItem =search.val();
    console.log($scope.searchItem);

    $http.get("/assets/empDetails.json").then(function(response){

     // $scope.empDetail=response.data
      console.log(response.data);
      console.log();
    //   function groupBy(arr, prop) {
    //     const map = new Map(Array.from(arr, obj => [obj[prop], []]));
    //     arr.forEach(obj => map.get(obj[prop]).push(obj));
    //     return Array.from(map.values());
    // }



   // console.log(groupBy(response.data,$scope.searchItem ));

    var rows = response.data;
    var keyName =$scope.searchItem;
    groupBy(keyName);




    function groupBy(keyName) {
      console.log("Group By :: ", keyName)

      var occurences = rows.reduce(function (r, row) {
          r[row[keyName]] = ++r[row[keyName]] || 1;
          return r;
      }, {});

      var result = Object.keys(occurences).map(function (key)       {
          return { key: key, value: occurences[key] };
      });

      console.log(result);
      //data = result ;
      $scope.data = [
        {
          name : "Blue",
          value : 10,
          color : "#4a87ee"
        },
        {
          name : "Green",
          value : 40,
          color : "#66cc33"
        },
        {
          name : "Orange",
          value : 70,
          color : "#f0b840"
        },
        {
          name : "Red",
          value : 2,
          color : "#ef4e3a"
        }
      ];
  }






    })

    }

   }])

   .directive ("pieChart", function () {
     return {
    restrict : "A",
    scope : {
        data : "="
    },
    link : function (scope, element) {
        var width,
            height,
            radius,
            pie,
            arc,
            svg,
            path;

        width = element[0].clientWidth;
        height = element[0].clientHeight;
        radius = Math.min (width, height) / 2;

        pie = d3.layout.pie ()
                .value (function (d) {return d.value;})
                .sort (null);

        arc = d3.svg.arc ()
                .outerRadius (radius - 20)
                .innerRadius (radius - 80);

        svg = d3.select (element[0])
                .append ("svg")
                .attr ({width : width, height : height})
                .append ("g")
                .attr ("transform", "translate(" + width * 0.5 + "," + height * 0.5 + ")");

        path = svg.datum (scope.data)
                .selectAll ("path")
                .data (pie)
                .enter ()
                .append ("path")
                .attr ({
                    fill : function (d, i) {return scope.data [i].color;},
                    d : arc
                });

        scope.$watch (
            "data",
            function () {
                pie.value (function (d) {return d.value;});
                path = path.data(pie);
                path.attr("d", arc);
            },
            true
        );
    }
};

})

Я использовал это https://embed.plnkr.co/plunk/jDvdSh в качестве ссылки. Все, что я хочу реализовать, - это поиск, я хочу выполнить сервисный вызов, а затем обработать ответ и отобразить его как круговую диаграмму. Или кто-то, пожалуйста, объясните, как директива круговой диаграммы вызывается в приведенной выше ссылке plnkr, что было бы более полезно

...