Angular Js加载图表的数据答案

【问题标题】：Angular Js Loading data for ChartAngular Js加载图表的数据
【发布时间】：2015-04-01 10:04:57
【问题描述】：

我正在尝试使用 ng-repeat 创建图表（使用 Chart.js Lib）。

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}}].

请帮忙。

【问题讨论】：

data="{{module.data}}" 这将评估为 data="{"modules": [ {...}]}" 双引号内的双引号不适用于 html，您应该通过执行 scope: { data: '='} 在指令中使用隔离范围

标签： angularjs

【解决方案1】：

直接从视图分配范围变量，例如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"]
将数据数组包装在数组中，因为它需要维度数组作为输入。

查看Working Plunkr了解更多信息。

谢谢。

【讨论】：

您好，我已经用 plunker 更新了我的问题。请看一看。