未捕获的TypeError：无法读取属性＆＃39; draw＆＃39;未定义的对象比例

Question

我正在关注Chart.js示例。但是当我尝试渲染thaat示例时，我收到以下错误：

  

未捕获的TypeError：无法读取属性＆＃39; draw＆＃39;未定义的

以下是我所遵循的例子。我已经做了相应的事情，我不知道为什么会导致这个问题。 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>

您还需要将其列为app / angular.module的要求：

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

Answer 2

确保您拥有Chart.js的兼容版本。 Version 1.0.2适用于tc-angular v1.0.11

的例子

除了angular，tc-angular和Chart.js之外，确保没有加载其他库（至少开始）。

Answer 3

尝试重现您的错误，我很快就遇到了完全相同的问题 - 但在运行varchar(255)并复制所有代码之后，这就是结果，这很正常。它还包括所需的脚本和模块依赖性，如教程中所示并由Tina提及

$ bower install tc-angular-chartjs