Uncaught TypeError：无法读取对象比例未定义的属性“ draw” [英] Uncaught TypeError: Cannot read property 'draw' of undefined for object scale
问题描述
我正在遵循Chart.js示例。但是，当我尝试渲染Thaat示例时，出现以下错误：
I am following the Chart.js example. But when I try to render thaat example, I get the following error:
未捕获的TypeError：无法读取未定义的属性'draw'
Uncaught TypeError: Cannot read property 'draw' of undefined
这是我关注的示例。我已经做了所有相应的事情，但我不知道为什么会导致这个问题。
http://carlcraig.github.io/tc-angular-chartjs / doughnut /
Here is the example I am following. I've done everything accordingly and I have no idea why it would be causing this problem. http://carlcraig.github.io/tc-angular-chartjs/doughnut/
下面是示例的实现。
我的模块
Below is my implementation of the example. My module
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>
我应该补充一点，就是我能够渲染图表的图例。
I should add that I am able to render the legend for the chart.
推荐答案
尝试重现您的错误，不久后我遇到了完全相同的问题-但在运行 $ bower之后，安装tc-angular-chartjs 并复制所有代码这就是结果，它可以正常工作。它还包括所需的脚本和模块依赖性，如教程中所示并由Tina提到
Trying to reproduce your error, I shortly had exactly the same problem - but after just running $ bower install tc-angular-chartjs and copying in all your code this is the result, which just works fine. It also includes the required scripts and the module dependency as shown in the tutorial and mentioned by 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：无法读取对象比例未定义的属性“ draw”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
