2015-02-22 5 views
0

Пробовал простые угловые + угловые-google-графики, но он вообще не работает. Диаграмма не отображается. Тестовый код следующим образом:угловые-google-диаграммы не работают

//bower.json 
{ 
     "dependencies": { 
       "jquery": "2.1.3", 
       "angular": "1.2.9", 
       "angular-ui-select": "0.9.9", 
       "select2": "3.5.2", 
       "bootstrap": "3.3.2", 
       "rxjs": "2.3", 
       "angular-google-chart": "0.0.11" 
     }, 
     "resolutions": { 
       "angular": ">=1.2.18" 
     } 
} 

И тест HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <link type="text/css" rel="stylesheet" href="bower_components/select2/select2.css"/> 
    <link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/> 
    <link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css"/> 
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script> 
    <script type="text/javascript" src="bower_components/select2/select2.js"></script> 
    <script type="text/javascript" src="bower_components/angular/angular.js"></script> 
    <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script> 
    <script type="text/javascript" src="bower_components/rxjs/dist/rx.all.js"></script> 
    <script type="text/javascript" src="bower_components/angular-google-chart/ng-google-chart.js"></script> 
    <script type="text/javascript" src="bower_components/angular-google-chart/sample.js"></script> 
    <script type="text/javascript" src="bower_components/angular-google-chart/partials/annotation.js"></script> 
    <script type="text/javascript" src="bower_components/angular-google-chart/partials/generic.js"></script> 
    <script type="text/javascript" src="bower_components/angular-google-chart/partials/fat.js"></script> 
    <script type="text/javascript"> 
     (function() { 
      var app = angular.module('test', []); 
      app.controller('TestController', function($scope) { 
       $scope.text = 'Hello'; 
       $scope.chartObject = {}; 
       $scope.onions = [ 
       {v: "Onions"}, 
       {v: 3}, 
       ]; 

       $scope.chartObject.data = {"cols": [ 
       {id: "t", label: "Topping", type: "string"}, 
       {id: "s", label: "Slices", type: "number"} 
       ], "rows": [ 
       {c: [ 
        {v: "Mushrooms"}, 
        {v: 3}, 
        ]}, 
        {c: $scope.onions}, 
        {c: [ 
         {v: "Olives"}, 
         {v: 31} 
         ]}, 
         {c: [ 
          {v: "Zucchini"}, 
          {v: 1}, 
          ]}, 
          {c: [ 
           {v: "Pepperoni"}, 
           {v: 2}, 
           ]} 
           ]}; 
          }); 
     }()); 
    </script> 
</head> 
<body ng-app="test"> 
    <div ng-controller="TestController"> 
     <div>{{text}}</div> 
     <div google-chart chart="chartObject" style="{{cssStyle}}"></div> 
    </div> 

</body> 
</html> 

Код взят из http://bouil.github.io/angular-google-chart/#/fat

ответ

3

Вы не включая модуль googlechart в зависимости вашего приложения - попробуйте:

var app = angular.module('test', ['googlechart']); 
+0

Я пропустил это, спасибо! –

Смежные вопросы