Uncaught TypeError: Не удается прочитать свойство 'draw' неопределенного масштаба объекта

Я следую примеру Chart.js. Но когда я пытаюсь представить пример thaat, я получаю следующую ошибку:Uncaught TypeError: Не удается прочитать свойство 'draw' неопределенного масштаба объекта

Uncaught TypeError: Cannot read property 'draw' of undefined

Вот пример, за которым я следую. Я сделал все правильно, и я понятия не имею, почему это вызвало бы эту проблему. http://carlcraig.github.io/tc-angular-chartjs/doughnut/

Ниже приведена моя реализация примера. Мой модуль

angular.module('main') 
    .controller('AboutController', ['$scope', function ($scope) { 
     $scope.data = [ 
     { 
      value: 300, 
      color: '#F7464A', 
      highlight: '#FF5A5E', 
      label: 'Red' 
     }, 
     { 
      value: 50, 
      color: '#46BFBD', 
      highlight: '#5AD3D1', 
      label: 'Green' 
     }, 
     { 
      value: 100, 
      color: '#FDB45C', 
      highlight: '#FFC870', 
      label: 'Yellow' 
     } 
    ]; 

    // Chart.js Options 
    $scope.options = { 

     // Sets the chart to be responsive 
     responsive: true, 

     //Boolean - Whether we should show a stroke on each segment 
     segmentShowStroke: true, 

     //String - The colour of each segment stroke 
     segmentStrokeColor: '#fff', 

     //Number - The width of each segment stroke 
     segmentStrokeWidth: 2, 

     //Number - The percentage of the chart that we cut out of the middle 
     percentageInnerCutout: 50, // This is 0 for Pie charts 

     //Number - Amount of animation steps 
     animationSteps: 100, 

     //String - Animation easing effect 
     animationEasing: 'easeOutBounce', 

     //Boolean - Whether we animate the rotation of the Doughnut 
     animateRotate: true, 

     //Boolean - Whether we animate scaling the Doughnut from the centre 
     animateScale: false, 

     //String - A legend template 
     legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>' 

    }; 
    }]);

А вот мой HTML код

<canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend></canvas>

Я должен добавить, что я в состоянии вынести легенду диаграммы. Legend

источник

2015-06-08 Justin A

draw - это метод Chart.js - вы уверены, что включили все зависимости?

<script type="text/javascript" src="js/Chart.js"></script> 
<script type="text/javascript" src="js/angular.js"></script> 
<script type="text/javascript" src="js/tc-angular-chartjs.js"></script>

Вам также необходимо указать его в качестве требования вашего приложения/angular.module:

angular.module('main', ['tc.chartjs']);

источник

2015-06-08 23:27:44 Tina

Итак, у меня все правильно настроено. Я даже могу сделать легенду. –

Убедитесь, что вы совместимую версию Chart.js. Version 1.0.2 работает нормально для примера, который у вас есть с tc-angular v1.0.11

Убедитесь, что у вас нет других загруженных библиотек (по крайней мере, для начала), кроме угловых, tc-угловых и Chart.js.

источник

2015-06-09 10:17:46 potatopeelings

Попытка воспроизвести вашу ошибку, у меня была точно такая же проблема, но после всего лишь запуска $ bower install tc-angular-chartjs и копирования всего кода, это результат, который просто отлично работает. Он также включает необходимые сценарии и зависимость от модуля, как показано в учебнике и упомянуто Tina

<!Doctype html> 
<html> 
<body> 
<div ng-app="main"> 
    <div ng-controller="AboutController"> 
    <canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend></canvas> 
    </div> 
</div> 
<script src="bower_components/Chart.js/Chart.min.js"></script> 
<script src="bower_components/angular/angular.min.js"></script> 
<script src="bower_components/tc-angular-chartjs/dist/tc-angular-chartjs.min.js"></script> 
<script> 
    angular 
     .module('main', ['tc.chartjs']) 
     .controller('AboutController', ['$scope', function ($scope) { 
     $scope.data = [ 
      { 
      value: 300, 
      color: '#F7464A', 
      highlight: '#FF5A5E', 
      label: 'Red' 
      }, 
      { 
      value: 50, 
      color: '#46BFBD', 
      highlight: '#5AD3D1', 
      label: 'Green' 
      }, 
      { 
      value: 100, 
      color: '#FDB45C', 
      highlight: '#FFC870', 
      label: 'Yellow' 
      } 
     ]; 

     // Chart.js Options 
     $scope.options = { 

      // Sets the chart to be responsive 
      responsive: true, 

      //Boolean - Whether we should show a stroke on each segment 
      segmentShowStroke: true, 

      //String - The colour of each segment stroke 
      segmentStrokeColor: '#fff', 

      //Number - The width of each segment stroke 
      segmentStrokeWidth: 2, 

      //Number - The percentage of the chart that we cut out of the middle 
      percentageInnerCutout: 50, // This is 0 for Pie charts 

      //Number - Amount of animation steps 
      animationSteps: 100, 

      //String - Animation easing effect 
      animationEasing: 'easeOutBounce', 

      //Boolean - Whether we animate the rotation of the Doughnut 
      animateRotate: true, 

      //Boolean - Whether we animate scaling the Doughnut from the centre 
      animateScale: false, 

      //String - A legend template 
      legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>' 

     }; 
     }]); 
</script> 
</body> 
</html>

источник

2015-06-09 16:54:39

Uncaught TypeError: Не удается прочитать свойство 'draw' неопределенного масштаба объекта

ответ

Смежные вопросы