我正在尝试使用 ng-repeat 创建图表(使用 Chart.js Lib)。
编辑:PLUNKER
HTML:
<div class="graph-display" ng-controller="jsonServerBox">
<div class="bar-chart-box" ng-repeat="module in ocw.modules">
<canvas class="chart chart-bar" data="{{module.data}}" labels="{{module.labels}}" series="{{module.series}}"></canvas>
</div>
</div>
JS:
app.controller('jsonServerBox', function($scope, $http) {
var json = {"modules":[
{
"series":"SeriesA",
"data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
"labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"]
},
{
"series":"SeriesB",
"data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
"labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"]
}
]};
$scope.ocw = json;
});
我收到以下错误:
Syntax Error: Token 'module.data' is unexpected, expecting [:] at column 3 of the expression [{{module.data}}] starting at [module.data}}].
请帮忙。
最佳答案
直接从 View 分配作用域变量,例如data="module.data"labels="module.labels"series="module.series"
。
在向指令提供数据和标签时不要使用插值指令。因为chart.js实现基于隔离范围
HTML
<div class="graph-display" ng-controller="jsonServerBox">
<div class="bar-chart-box" ng-repeat="module in ocw.modules">
<canvas class="chart chart-bar" data="module.data" labels="module.labels" series="{{module.series}}"></canvas>
</div>
</div>
这可以帮助你。谢谢。
更新1:
实际上你错过了几件事。
"series": ["SeriesA"],
"data": [["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"]],
代码中的更改是
- 数组内的 Wrap Series 已更改为
"series": "SeriesA"
为"series": ["SeriesA"]
- 将数据数组包裹在数组内,因为它采用维度数组作为输入。
检查Working Plunkr了解更多信息。
谢谢。
关于angularjs - Angular Js 加载图表数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28278096/