Angular Js 加载图表数据 [英] Angular Js Loading data for Chart
问题描述
我正在尝试使用 ng-repeat 创建图表(使用 Chart.js Lib).
HTML:
<div class="bar-chart-box" ng-repeat="ocw.modules 中的模块"><canvas class="chart chart-bar" data="{{module.data}}" labels="{{module.labels}}" series="{{module.series}}"></canvas>
JS:
app.controller('jsonServerBox', function($scope, $http) {var json = {模块":[{"系列":"系列A","数据":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],标签":[01"、02"、03"、04"、05"、06"、07"、08"、09"、10"]},{"系列":"系列B","数据":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],标签":[01"、02"、03"、04"、05"、06"、07"、08"、09"、10"]}]};$scope.ocw = json;});
我收到以下错误:
语法错误:令牌module.data"是意外的,期望在表达式 [{{module.data}}] 的第 3 列处出现 [:],从 [module.data}}] 开始.
请帮忙.
直接从 View 分配范围变量,如 data="module.data" labels="module.labels" series="module.series"代码>.
在提供数据时不要使用 interpolation 指令 &指令标签.因为 chart.js 实现是基于隔离作用域
HTML
<div class="bar-chart-box" ng-repeat="ocw.modules 中的模块"><canvas class="chart chart-bar" data="module.data" labels="module.labels" series="{{module.series}}"></canvas>
这对你有帮助.谢谢.
更新 1:
实际上你错过了几件事.
"series": ["SeriesA"],数据":[[90",99",80",91",76",75",60",67",59",55"]],
代码中的更改是
- Wrap Series inside array 将
"series": "SeriesA"
改为"series": ["SeriesA"]
- 将数据数组包装在数组中,因为它以多维数组作为输入.
查看 Working Plunkr 了解更多信息.>
谢谢.
I am trying to create charts( Using Chart.js Lib ) using ng-repeat.
EDIT : 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;
});
And I'm getting following error:
Syntax Error: Token 'module.data' is unexpected, expecting [:] at column 3 of the expression [{{module.data}}] starting at [module.data}}].
Please help.
Assign scope variables directly from View like data="module.data" labels="module.labels" series="module.series"
.
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.
Update 1:
Actually you were missed couple of thing.
"series": ["SeriesA"],
"data": [["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"]],
Changes in your code are
- Wrap Series inside array changed
"series": "SeriesA"
, to"series": ["SeriesA"]
- Wrap data array inside array because it takes dimensional array as an input.
Check Working Plunkr for more info.
Thanks.
这篇关于Angular Js 加载图表数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!