我正在尝试用angularjs和chart.js创建折线图。下面是我的代码：
<link rel="stylesheet"
href="http://jtblin.github.io/angular-chart.js/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script
src="http://jtblin.github.io/angular-chart.js/node_modules/angular/angular.min.js"></script>
<script
src="http://jtblin.github.io/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
<script
src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
<script>
var app = angular.module('myAPP', ['chart.js'])
app.controller('ChartController', function ($scope, $http) {
$scope.counter = [1, 2, 3]
$scope.labels = []
$scope.data = []
$scope.labels[ 1 ] = [1, 2, 3, 4]
$scope.labels[ 2 ] = [1, 2, 3]
$scope.labels[ 3 ] = [1, 2, 3, 4, 5]
$scope.data[ 1 ] = [1, 2, 0, 4]
$scope.data[ 2 ] = [5, 1, 7]
$scope.data[ 3 ] = [5, 6, 2, 8, 9]
$scope.chartOptions = {
legend: {
display: true,
},
title: {
display: true,
text: 'title'
}
}
})
</script>
<body ng-app="myAPP" ng-controller="ChartController">
<div ng-repeat="n in counter">
<canvas
class="chart chart-line"
chart-options="chartOptions"
chart-data="data['{{n}}']"
chart-labels="labels['{{n}}']"
/>
</div>
</body>
这里我正在使用ng重复创建画布
<div ng-repeat="n in counter">
<canvas
class="chart chart-line"
chart-options="chartOptions"
chart-data="data['{{n}}']"
chart-labels="labels['{{n}}']"
/>
</div>
但不幸的是，没有呈现任何图表，但当我像下面这样手动键入数据和标签标签时，会显示图表。
<div ng-repeat="n in counter">
<canvas
class="chart chart-line"
chart-options="chartOptions"
chart-data="data['1']"
chart-labels="labels['1']"
/>
</div>
下面是两个例子：
工作示例
不起作用的示例
你能帮我找出我在"不以身作则"中做错了什么吗？
您应该去掉引号和花括号，这样就可以了。
<div ng-repeat="n in counter">
<canvas
class="chart chart-line"
chart-options="chartOptions"
chart-data="data[n]"
chart-labels="labels[n]"
/>
</div>