Данные не получаются, Angular JS

Question

Я пытаюсь создать несколько диаграмм, используя angular-chart.js и 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:

(function() { 
    var app = angular.module("Bar_Chart", ["chart.js", "ui.bootstrap"]); 
    app.controller('jsonServerBox', function($scope) { 
    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"], 
        "colours":[{ // default 
            "fillColor" : "rgba(224, 108, 112, 1)", 
            "strokeColor" : "rgba(207,100,103,1)", 
            "pointColor" : "rgba(220,220,220,1)", 
            "pointStrokeColor" : "#fff", 
            "pointHighlightFill": "#fff", 
            "pointHighlightStroke": "rgba(151,187,205,0.8)" 
           }] 
       }, 

       { 
        "series":"SeriesB", 
        "data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"], 
        "labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"], 
        "colours":[{ // default 
            "fillColor" : "rgba(224, 108, 112, 1)", 
            "strokeColor" : "rgba(207,100,103,1)", 
            "pointColor" : "rgba(220,220,220,1)", 
            "pointStrokeColor" : "#fff", 
            "pointHighlightFill": "#fff", 
            "pointHighlightStroke": "rgba(151,187,205,0.8)" 
           }] 
       } 

     ]}; 
    $scope.ocw = json; 
    }); 
})(); 

Любая помощь очень ценится.

Answer 1

Похоже, структуры данных является проблемой здесь. параметр данных должен быть массивом серийных массивов:

"data": [["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"]], 

Затем он должен отображать диаграммы.

Демо:http://plnkr.co/edit/epgPgdM9I66eoP70n7Iy?p=preview

Answer 2

Похоже, что есть некоторые проблемы с самим json. проверил его через json validator и получил сом.

Fixed их, и это выход:

{"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"], 
       "colours":[{ 
           "fillColor" : "rgba(224, 108, 112, 1)", 
           "strokeColor" : "rgba(207,100,103,1)", 
           "pointColor" : "rgba(220,220,220,1)", 
           "pointStrokeColor" : "#fff", 
           "pointHighlightFill": "#fff", 
           "pointHighlightStroke": "rgba(151,187,205,0.8)" 
          }] 
      }, 

      { 
       "series":"SeriesB", 
       "data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"], 
       "labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"], 
       "colours":[{ 
           "fillColor" : "rgba(224, 108, 112, 1)", 
           "strokeColor" : "rgba(207,100,103,1)", 
           "pointColor" : "rgba(220,220,220,1)", 
           "pointStrokeColor" : "#fff", 
           "pointHighlightFill": "#fff", 
           "pointHighlightStroke": "rgba(151,187,205,0.8)" 
          }] 
      } 

    ]}