遗漏的类型错误：无法读取属性未定义的“画”的对象规模(Uncaught TypeError: Can

我下面的chart.js之一例。但是，当我尝试呈现看过那部为例，我得到以下错误：

遗漏的类型错误：无法读取属性“画”的未定义

下面是我下面的例子。我因此所做的一切，我不知道为什么它会引起此问题。 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>

我要补充一点，我能够呈现图表图例。

Answer 1:

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']);

Answer 2:

请确保您有chart.js之的兼容版本。 1.0.2版的作品确定为例如你有TC-角v1.0.11版

请确保您有没有加载其他库（至少开始），除了角，TC-角度和chart.js之。

Answer 3:

尝试重现你的错误，我不久有完全相同的问题-但只是运行后$ 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>

文章来源: Uncaught TypeError: Cannot read property 'draw' of undefined for object scale