Диаграмма Js + Угловая

Question

Я что-то пропустил? В течение двух дней я просмотрел этот код, чтобы увидеть проблему только для начала. Я тестирую плагин Chart Js, и я намерен использовать его с угловым.

Похоже, что есть какой-то конфликт с моим кодом, который доцент позволяет запускать любой из сценариев. Пожалуйста, помогите

//Charts// 
// Get the context of the canvas element we want to select 
var ctx = document.getElementById("myChart").getContext("2d"); 
var LineChart = new Chart(ctx).Line(data); 

//Data// 
data = { 
    labels : ["January", "February", "March", "April", "May", "June", "July"], 
    datasets : [{ 
    data:[65, 59, 80, 81, 56, 55, 40] 
    }] 
}; 

var app = angular.module('myApp',[]); 
app.controller('MainController', function($scope){ 
    $scope.Title = 'My Charts'; 
}); 

http://plnkr.co/edit/RXzjPllg0RSWjvgMjIoU?p=preview

Answer 1

Получил свой график работы для вас

http://plnkr.co/edit/YrI6RtQTkJkZde3Ynnhq?p=preview

var app = angular.module('Chart', []); 

    app.controller('MainController', ['$scope', function($scope) { 

     $scope.greet = 'My Charts'; 

     data = { 
      labels: ["January", "February", "March", "April", "May", "June", "July"], 
      datasets: [{ 
       data: [65, 59, 80, 81, 56, 55, 40] 
      }] 
     }; 

     var ctx = document.getElementById("myChart").getContext("2d"); 
     var LineChart = new Chart(ctx).Line(data); 

    }]); 

    //Data// 

Answer 2

вот пример, который работал для меня. в вашем page.html ...

<!-- in head tag include: jquery.js jquery-ui.js bootstrap.js angular.js chart.js angular-chart.js angular-chart.css then this js --> 

    <script type="text/javascript"> 
     var app = angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope, $http) {  
      // get example [{"January":10},{"February":20},{"March":50},{"April":30},{"May":20},{"June":10},{"July":10}] 
     $http.get('http://mywebsite/myjsondata'). 
      success(function(data) { 
       var labelArray = []; 
       var dataArray = [];     
     angular.forEach(data, function(item){ 
      var jsObj = angular.fromJson(item); 
      for (var prop in jsObj) { 
       //alert(prop + " is " + jsObj[prop]); 
       labelArray.push(prop); 
      dataArray.push(parseInt(jsObj[prop])); 
      } 
     }); 

     //$scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; 
     // $scope.data = [[10, 20, 50, 30, 20, 10, 10]]; 
     $scope.labels = labelArray;      
     $scope.data = [dataArray]; 
       $scope.series = ['Send Totals']; // Series A 
      }) 
      .error(function() { 
     alert("Sorry. Unable to retrieve the data.");  
     }); 
    </script> 

... в теле поставить этот

<div class="col-lg-6 col-sm-12 ng-scope" id="line-chart" ng-controller="LineCtrl"> 
      <div class="panel panel-default"> 
      <div class="panel-heading">Line Chart</div> 
      <div class="panel-body"> 
     <canvas id="line" class="chart chart-line" chart-data="data" 
     chart-labels="labels" chart-legend="true" chart-series="series" 
     chart-click="onClick" > 
     </canvas> 

     </div> 
     </div> 
    </div>