我正在尝试使用ng-repeat创建图表(使用Chart.js Lib)。
编辑:plnkr
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"。
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"]],
您代码中的更改是
"series": "SeriesA"
"series": ["SeriesA"]
有关更多信息,请检查 WorkingPlunkr 。
谢谢。