海图角的js加载数据 [英] Angular Js Loading data for Chart
本文介绍了海图角的js加载数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想创建图表(使用chart.js之库)采用NG-重复。
I am trying to create charts( Using Chart.js Lib ) using ng-repeat.
编辑: 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范围变量,如数据=module.data标签=module.labels系列=module.series
。
Assign scope variables directly from View like data="module.data" labels="module.labels" series="module.series"
.
同时提供数据和放大器不要使用interpolution指令;标贴到指令。由于 chart.js之的实现是基于隔离的范围
Don't use interpolution directive while providing data & lables to directive. Because the chart.js implementation is based on isolated scope
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>
这可以帮助你。谢谢你。
This could help you. Thanks.
更新1:
其实你都错过了几件事。
Actually you were missed couple of thing.
"series": ["SeriesA"],
"data": [["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"]],
在code的变化是
Changes in your code are
- 裹系列内部阵列改变
系列:SeriesA
,到系列:SeriesA]
- 里面裹阵列数据阵列,因为它需要维数组作为输入。
工作Plunkr 更多信息
感谢。
这篇关于海图角的js加载数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文