0

我正在尝试将 googlecharts 与 ngTable 结合起来。

这是我的图表： http ://plnkr.co/edit/RB2G4zjwaTKrrrRVdyFz?p=preview 。图表的数据，我想从这个表中得到它们：http: //bazalt-cms.com/ng-table/example/21

为了更好地解释它，在 plnkr 中，我根据 ngTable 的示例手动输入了图表的数据（按角色分组：管理员 4，用户 12，版主 7）。

  • (a) group.data.length -> 分别为我提供4、12、7
  • (b) group.value -> 为我提供每个管理员、用户、版主

最大的问题是：如何将这些数据传递给图表？我该如何解释chart.draw($scope.data, options); 它应该从（a）和（b）中获取我的数据来创建图表。

4

1 回答 1

0

我认为你应该通过服务传递数据。这是我正在做的事情的版本： http ://plnkr.co/edit/56TAdPTMt5nwnMwhErQM?p=preview

app.controller('MyCtrl', function($scope,data) {
      var columns = [{ 'string' :'Topping' }, {'number' : 'Slices'}],
          rows = [[ 'User', 12 ], ['Administrator', 4], ['Moderator', 7]];

      $scope.data = data.get(columns,rows);
    });

    app.service('data',function() {
      return {
        get : function(_columns,_rows) {
          var _data = new google.visualization.DataTable();
          for(var i=0;i < _columns.length;i++){
        for(k in _columns[i]) {
            _data.addColumn(k,_columns[i][k]);
        }
          }
          _data.addRows(_rows);
          return _data;
        }
      }
    });

    app.directive('chart', function() {
        return {
          restrict: 'A',
          link: function($scope, $elm, $attrs) {
            var chart,data,
              // Set chart options
              options = {'title':'ROLE',
                           'width':400,
                           'height':300};
            $scope.$watch(function() {
              return JSON.stringify($scope[$attrs.chart]);
            },
            function(_d) {
              if(typeof _d !== 'undefined') {
                data = $scope[$attrs.chart]
                // Instantiate and draw our chart, passing in some options.
                chart = new google.visualization.PieChart($elm[0]);
                chart.draw(data, options);
              }
            });
          }
      }
    });
于 2014-02-07T23:48:17.180 回答