一尘不染

Angular Js加载图表数据

angularjs

我正在尝试使用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}}].

请帮忙。


阅读 198

收藏
2020-07-04

共1个答案

一尘不染

直接从View分配范围变量,例如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"]],

您代码中的更改是

  1. 将Wrap Series内部数组更改"series": "SeriesA""series": ["SeriesA"]
  2. 将数据数组包装在数组内,因为它将维数组作为输入。

有关更多信息,请检查 WorkingPlunkr

谢谢。

2020-07-04