ChartJS với AngularJS - Canvas sẽ không hiển thị bất cứ điều gì

Question

Tôi đang cố sử dụng thư viện angular-chartjs nhưng gặp phải một số sự cố. Không có lỗi trên trang. Nhưng khung hình trống.

Có ai có ý tưởng không? Tôi đã thử sắp xếp lại các tập lệnh một vài lần. Tôi không thể hiểu được. :(

Đây là html

Và đây là ứng dụng khởi:.

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

Và đây là khiển cho phần này:

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

Một người khác trong nhóm hack của tôi đã tìm ra sau ngày đó. Dưới đây là 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> 

Để biết thêm, chúng tôi github repo (quan điểm là "cashflow.html" một) và để xem how it rendered.

Có lẽ không phải là cách tốt nhất để làm điều đó.

Answer 2

Có vẻ như số điện thoại ng-app bị thiếu trong số HTML của bạn sẽ chứa ứng dụng góc nào bạn sẽ sử dụng.

Bạn có thể đặt nó ở bên trong một trong số divs gói biểu đồ.