angular-chartjs-doughnut-directive/index.html at master · Sixthdim/angular-chartjs-doughnut-directive · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html ng-app="angularjs-starter">
  <head>
      <title>Angular ChartJs Doughnut Directive</title>

      <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />

      <script src="Chart.js"></script>

      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
      <script src="angular-chartjs-doughnut-directive.js"></script>

      <script>
      var app = angular.module('angularjs-starter', ['angular.directives-chartjs-doughnut']);

      app.controller('MainCtrl', function($scope) {
        $scope.doughnutData = [
          {value: 30, color:"#F7464A"},
          {value : 50, color : "#E2EAE9"},
          {value : 100, color : "#D4CCC5"},
          {value : 40, color : "#949FB1"},
          {value : 120, color : "#4D5360"}
        ]
      });
      </script>

  </head>
  <body ng-controller="MainCtrl">
    <h1>AngularJS Chart.js Doughnut Directive</h1>
    <p>Have a look at the source code to see an example.</p>

    <div ang:chartjs:doughnut data-chartjs-model="doughnutData"
                              data-chartjs-width="300"
                              data-chartjs-height="300"
                              data-chartjs-segment-show-stroke="true"
                              data-chartjs-segment-stroke-color="#fff"
                              data-chartjs-segment-stroke-width="3"
                              data-chartjs-percentage-inner-cutout="60"
                              data-chartjs-animation="true"
                              data-chartjs-animation-easing="easeOutQuint"
                              data-chartjs-animate-rotate="false"
                              data-chartjs-animate-scale="true"></div>
  </body>
</html>