我正在关注Chart.js示例 . 但是当我尝试渲染thaat示例时,我收到以下错误:
未捕获的TypeError:无法读取undefined的属性'draw'
这是我所遵循的例子 . 我已经做了相应的事情,我不知道为什么会导致这个问题 . 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>
我应该补充一点,我能够渲染图表的图例 .
3 回答
draw
是Chart.js方法 - 您确定已包含所有依赖项吗?您还需要将其列为app /
angular.module
的要求:确保您具有Chart.js的兼容版本 . Version 1.0.2适用于tc-angular v1.0.11的示例
除了angular,tc-angular和Chart.js之外,确保没有加载其他库(至少开始) .
试图重现你的错误,我很快就遇到了完全相同的问题 - 但是在运行
$ bower install tc-angular-chartjs
并复制你的所有代码后,这就是结果,这很正常 . 它还包括所需的脚本和模块依赖性,如教程中所示并由Tina提及