2017-09-28 10 views
0

À l'aide de quel paquet angulaire nous pouvons concevoir ce type de camemberts?Graphique à secteurs angulaire

PIE Chart (Ouvrir ce pour le modèle de graphique circulaire)

Note: besoin d'étiquettes de la même manière

Merci à l'avance

+0

départ https://www.npmjs.com/package/angular2-highcharts – Rahul

+0

Toute open source une? @Rahul – Navneeth

+0

Il est open source – Rahul

Répondre

0

Utiliser la bibliothèque nvd3, très simple à utiliser et facile pour injecter sur votre contrôleur.

est ici un exemple pour comprendre

app.controller('MainCtrl', function($scope) { 
$scope.options = { 
      chart: { 
       type: 'pieChart', 
       height: 450, 
       donut: true, 
       x: function(d){return d.key;}, 
       y: function(d){return d.y;}, 
       showLabels: true, 
       labelsOutside: true, 
       pie: { 
        startAngle: function(d) { return d.startAngle/2 -Math.PI/2 }, 
        endAngle: function(d) { return d.endAngle/2 -Math.PI/2 } 
       }, 
       duration: 500, 
       legend: { 
        margin: { 
         top: 5, 
         right: 70, 
         bottom: 5, 
         left: 0 
        } 
       } 
      } 
     }; 

     $scope.data = [ 
      { 
       key: "One", 
       y: 5 
      }, 
      { 
       key: "Two", 
       y: 2 
      }, 
      { 
       key: "Three", 
       y: 9 
      }, 
      { 
       key: "Four", 
       y: 7 
      }, 
      { 
       key: "Five", 
       y: 4 
      }, 
      { 
       key: "Six", 
       y: 3 
      }, 
      { 
       key: "Seven", 
       y: .5 
      } 
     ]; 
}); 

http://plnkr.co/edit/OlROrZ?p=preview