Angular Js Загрузка данных для диаграммы

Question

Я пытаюсь создать диаграммы (используя Chart.js Lib) с помощью 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}}].

Пожалуйста помоги.

Answer 1

Присвойте переменные области видимости непосредственно из View like data="module.data" labels="module.labels" series="module.series",

Не используйте директиву interpolution, предоставляя директиву data & lables. Поскольку реализация 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"]],

Изменения в вашем коде

1. Серия Wrap внутри массива изменена "series": "SeriesA", чтобы "series": ["SeriesA"]
2. Оберните массив данных внутри массива, потому что он принимает размерный массив в качестве входных данных.

Проверьте Working Plunkr для получения дополнительной информации.

Благодарю.