Question

我试图在AngularJS中的ng-repeat中绘制一些带有flotchart的饼图。问题是只渲染第一个饼图。有空白区域应该出现其他饼图。这是代码：

JAVASCRIPT

var app = angular.module('plunker', []);

app.controller('AppCtrl', function($scope) {
$scope.recordedEvents = [
                          {
                       id: '#007cbb',
                       name: 'customers'

                   },{
                       id: '#ef7624',
                       name: 'employees'
                   }, {
                       id: '#bbb322',
                       name: 'vendors'
                   }, {
                       id: '#449955',
                       name: 'admin'
                   }
                   ]
               ;  

$scope.$apply();
});

HTML

<!DOCTYPE html>
<html ng-app="Test">
<head>
<meta charset="UTF-8">
<title>Charts</title>
</head>
<body ng-controller="AppCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>
<script src="flotPiechart.js" type="text/javascript"></script>
<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 500px;
    text-align: left;
}
</style>
 
 
<!-- Javascript -->
<script type="text/javascript">
$(function () {
    var data = [
        {label: "", data:20,color: "#007cbb"},
        {label: "", data: 80,color: "#c2c6c9"}
    ];
 
    var options = {
            series: {
                pie: {show: true,
                label: {
                        show: true,
                        threshold: 0.2
                    }
    }
                    },
                    legend: {
                        show: false
                    }
         };
 
    $.plot($("#flotcontainer"), data, options); 
});
</script>
 
<!-- HTML -->
<div ng-repeat="user in recordedEvents"  ng-style="{'display': 'inline-block' }">
{{user.name}}
<div id="flotcontainer" ></div></div>
</body>
</html>

运行时会显示以下页面：

enter image description here

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~

修改

@A。罗达斯，谢谢！它适用于静态数据，但我们如何将动态数据传递到图表中？这是你的代码的一个plunker http://plnkr.co/edit/r4Rqltd4Y9tKprQJDizG?p=preview

上面的链接包含您正在进行修改的代码：：script.js中的动态数据代码：

.controller('AppCtrl', function($scope) {
$scope.recordedEvents = [
                          {
                           "name": "server1",
                           "data":[{label: "", data:20, color: "#007cbb"},
                                   {label: "", data:80, color: "#c2c6c9"}]

                       },{
                           "name": "server2",
                           "data":[{label: "", data:70, color: "#007cbb"},
                                   {label: "", data:30, color: "#c2c6c9"}]
                       }
                       ]
       ; 
});

我想将上面的JSON作为输入传递给图表而不是

中的数据

var data = [
  {label: "", data:20, color: "#007cbb"},
  {label: "", data:80, color: "#c2c6c9"}
  ];

我该怎么做？你能帮忙吗？

Answer 1

当您致电$.plot($("#flotcontainer"), data, options);时，只有一个<div>被渲染以绘制情节。此外，您对所有图表都使用相同的ID。

您可以使用Angular Directive将此函数应用于ng-repeat内的每个DOM元素：

var data = [...];
var options = { ... };

angular.module('plunker', [])
.directive('myChart', function(){
    return {
        link: function(scope, elm){
            $.plot($(elm), data, options);
        }
    }
})
.controller('AppCtrl', function($scope) {
    $scope.recordedEvents = [
        {id: '#007cbb', name: 'customers'},
        {id: '#ef7624', name: 'employees'},
        {id: '#bbb322', name: 'vendors'},
        {id: '#449955', name: 'admin'}
    ];
});

HTML：

<div ng-repeat="user in recordedEvents"  ng-style="{'display': 'inline-block' }">
    {{user.name}}
    <div class="flotcontainer" my-chart></div>
</div>

Plunker ：http://plnkr.co/edit/iJfMNko3tHfUk7ApEft2

UPDATE ：要将复杂数据传递给指令，需要将变量绑定到本地范围：

angular.module('plunker', [])
.directive('myChart', function(){
    return {
        restrict: 'A',
        scope: {
          chartdata: "=",
        },
        link: function(scope, elm){
            $.plot($(elm), scope.chartdata, options);
        }
    }
})
.controller('AppCtrl', function($scope) {
    $scope.recordedEvents = [
      {
        "name": "server1",
        "data":[{label: "", data:20, color: "#007cbb"}, {label: "", data:80, color: "#c2c6c9"}]
      },
      {
        "name": "server2",
        "data":[{label: "", data:70, color: "#007cbb"}, {label: "", data:30, color: "#c2c6c9"}]
      }];
});

HTML：

<div ng-repeat="user in recordedEvents"  ng-style="{'display': 'inline-block' }">
    {{user.name}}
    <div class="flotcontainer" my-chart chartdata="user.data"></div>
</div>

Plunker ：http://plnkr.co/edit/WEJMA0f7DnnAh6h8jaMW

AngularJS：FlotChart不用ng-repeat重复

1 个答案: