AngularJS के साथ चार्टजेएस - कैनवास कुछ भी प्रदर्शित नहीं करेगा

Question

मैं angular-chartjs लाइब्रेरी का उपयोग करने की कोशिश कर रहा हूं लेकिन कुछ मुद्दों पर चल रहा हूं। पेज पर कोई त्रुटि नहीं है। लेकिन कैनवास खाली है।

किसी के पास कोई विचार है? मैंने स्क्रिप्ट को कुछ बार फिर से चलाने की कोशिश की है। मैं बस इसे समझ नहीं सकता। यहाँ

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

और इस भाग के लिए नियंत्रक है: :(

यहाँ एचटीएमएल यहाँ है

और एप्लिकेशन प्रारंभ है।

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

मेरी हैक टीम पर किसी और ने उस दिन बाद में इसे समझ लिया। यहाँ 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> 

अधिक के लिए, हमारे github repo (दृश्य "cashflow.html" एक था) और how it rendered को देखने के लिए।

शायद ऐसा करने का सबसे अच्छा तरीका नहीं है।

Answer 2

यह आपके HTML में आपकी अनुपलब्ध ng-app जैसा दिखता है जिसमें आप कौन सी कोणीय ऐप का उपयोग करेंगे।

आप इसे ग्राफ को लपेटकर divs के अंदरूनी में डाल सकते हैं।