ChartJS con AngularJS - Canvas non visualizza nulla

Question

Sto tentando di utilizzare la libreria angular-chartjs ma ho riscontrato alcuni problemi. Non ci sono errori nella pagina. Ma la tela è vuota.

Qualcuno ha un'idea? Ho provato a riordinare gli script alcune volte. Non riesco a capirlo. :(

Ecco la html

E qui è la applicazione di inizializzazione:.

var app = angular.module('profitly', ['ngRoute', 'chartjs']); 

E qui è il controller per questa parte:

app.controller('graph', function($scope) { 

    $scope.someData = { 
    labels: [ 
     'Supply', 
     'May', 
     'Jun' 
    ], 
    datasets: [ 
     { 
    data: [1, 7, 15, 19, 31, 40] 
     }, 
     { 
    data: [6, 12, 18, 24, 30, 36] 
     } 
    ] 
    }; 

    $scope.someOptions = { 
     segmentStrokeWidth: 20, 
     segmentStrokeColor: '#000' 
    }; 

}); 

Answer 1

Qualcun altro nel mio gruppo di hacker l'ha capito più tardi quel giorno. Ecco il codice HTML:

<article class="col-xs-6 col-md-offset-3 col-md-6 center"> 
    <canvas id="expenses" width="200" height="100"></canvas> 
     <script> 
        var pieData = [ 
      { 
        value: 20, 
        color:"#878BB6" 
      }, 
      { 
        value : 40, 
        color : "#4ACAB4" 
      }, 
      { 
        value : 10, 
        color : "#FF8153" 
      }, 
      { 
        value : 30, 
        color : "#FFEA88" 
      } 
    ]; 
    var pieOptions = { 
      segmentShowStroke : false, 
      animateScale : true 
    } 
    var expenses = document.getElementById("expenses").getContext("2d"); 
    new Chart(expenses).Pie(pieData, pieOptions); 
    </script> 

</article> 

Per di più, il nostro github repo (la vista era il "cashflow.html" uno) e di vedere how it rendered.

Probabilmente non è il modo migliore per farlo.

Answer 2

Sembra che manchi il ng-app mancante nel tuo HTML che conterrebbe quale applicazione angolare utilizzerai.

È possibile inserirlo all'interno dello divs avvolgendo il grafico.