angularjs – Angular Js为图表加载数据

发布时间：2020-12-17 07:35:53 所属栏目：安全来源：网络整理

导读：我正在尝试使用ng-repeat创建图表(使用Chart.js Lib). 编辑：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}}

我正在尝试使用ng-repeat创建图表(使用Chart.js Lib).

编辑：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","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”.

提供数据时不要使用interpolution指令.指示.因为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","55"]],

代码的变化是

>包裹系列内部阵列改为“系列”：“SeriesA”,改为“系列”：[“SeriesA”]
>在数组中包装数据数组,因为它将维数组作为输入.

检查Working Plunkr以获取更多信息.

谢谢.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!