我正在使用Chart Js和Angular Chart Directive . 我在ng-repeat指令中动态地需要条形图 . https://jtblin.github.io/angular-chart.js/
根据他们的文档,我必须给出两个数组
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40]
];
我在我的控制器中创建了两个函数来生成图形标签和数据数组 .
$scope.makeChartLbl=function(data)
{
console.log(data);
var arr=[];
for(var d in data)
{
arr.push(d.name)
}
// console.log(arr);
return arr;
}
$scope.makeChartData=function(data)
{
console.log(data);
var arr=[];
for(var d in data)
{
arr.push(d.total_vote)
}
// console.log(arr);
return arr;
}
我在数据集中的选项对象如
{
"options": [
{
"id": 1,
"pool_id": 1,
"name": "pool1 option1",
"total_vote": 1
},
{
"id": 2,
"pool_id": 1,
"name": "pool1 option2",
"total_vote": 0
},
...
...
]
}
在ng-repeat指令中查看
<canvas id="bar" class="chart chart-bar"
chart-data="makeChartData(options)" chart-labels="makeChartLbl(options)">
</canvas>
但它没有生成图表 . 怎么能解决这个问题?
1 回答
存在多个问题:我不确定您是否正确读取了对象,请检查我的实现代码;另一个问题是由于你在函数中创建新数组的方式,Angular会出现$rootScope:infdig错误,我也解决了这个问题,但你可能需要针对你的特定情况修改它 .
这是一个解决方案:
codepen中的完整代码:
Angular Chart.js issue
结果: