ChartJS z AngularJS - Canvas nic nie wyświetli

Question

Próbuję użyć biblioteki angular-chartjs, ale działa przy niektórych problemach. Na stronie nie ma żadnych błędów. Ale płótno jest puste.

Ktoś ma pomysł? Próbowałem kilka razy zmieniać kolejność skryptów. Po prostu nie mogę tego rozgryźć. :(

Oto html

A oto App inicjalizacja.

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

A oto kontroler dla tej strony:

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

Ktoś inny w moim zespole hackerów doszedł do tego później. Oto 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> 

Dla bardziej nasza github repo (widok był "cashflow.html" jeden) i zobaczyć how it rendered.

Prawdopodobnie nie jest to najlepszy sposób na zrobienie tego.

Answer 2

Wygląda na to, że zaginęła ng-app w swoim HTML, która zawierałaby aplikację kątową, z której będziesz korzystać.

Możesz umieścić w środku jeden z divs, zawijając wykres.