Question

我正在尝试使用谷歌图表来显示我的数据。我发现了Nicolas Bouil的这个Angular-Google-Chart指令。当我进入我的应用程序时，图表将不会显示。

这是我的应用层次结构：

controllers
  +------ staff.ctrl.js
  +------ todo.ctrl.js
views
  +------ home
  +------ staff
            +------ member.html
  +------ todo
app.js
config.js
ng-google-chart.js
index.html

config.js文件：

var app = angular.module('routeConfig', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise('/home');

  $stateProvider
    //HOME STATES
    .state('home', {
      url: '/home',
      templateUrl: './views/home/dashboard.html' 
    })

    //STAFF STATES
    .state('staff', {
      controller: 'StaffController',
      url: '/staff',
      templateUrl: './views/staff/member.html'
    })

    //TODO STATES AND NESTED VIEWS
    .state('todo', {
      controller: 'TodoController',
        url: '/todo',
        templateUrl: './views/todo/todo.html',
      go: './views/todo/list-todo.html'
    })

    .state('todo.add', {
      controller: 'TodoController',
      url: '/add',
      templateUrl: './views/todo/add-todo.html'
    })

    .state('todo.list', {
      controller: 'TodoController',
      url: '/list',
      templateUrl: './views/todo/list-todo.html'
    })

    .state('todo.archive', {
      controller: 'TodoController',
      url: '/archive',
      templateUrl: './views/todo/archive-todo.html'
    });
}); // end of $app.config()

app.js文件：

angular.module('todoApp', ['routeConfig', 'ui.router', 'googlechart']);

staff.ctrl.js文件：

var app = angular.module('todoApp');

app.controller('StaffController', [
  '$scope', '$http', '$state', function($scope, $http, $state){
  $scope.coffeeData = [{"name":"open","todos":30},{"name":"done","todos":2},{"name":"archive","todos":1}];
}]);

index.html文件：

<!DOCTYPE html>
<html ng-app="todoApp">
  <head>
    <title>ToDo App</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

  </head>
  <body ng-controller="TodoController as todo">

    <!-- Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" ui-sref="home">Task Organizer</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a ui-sref="home">Home</a></li>
            <li><a ui-sref="todo">Todo</a></li>
            <li><a ui-sref="staff">Staff</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div ui-view class="container" style="padding-top:40px;">


    </div>

  </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="config.js"></script>
    <script src="app.js"></script>
    <script type="text/javascript" src="ng-google-chart.js"></script>
    <script src="controllers/todo.ctrl.js"></script>
    <script src="controllers/staff.ctrl.js"></script>
  </body>
</html>

member.html文件：

<script type="text/javascript" src="https://www.google.com/jsapi?ext.js"></script>
<div style="padding-top:40px;">
  <div class="row">
    <div ng-controller="StaffController" class="col-md-12">
      <div google-chart chart="coffeeData"></div>
    </div>
  </div>
</div>

Answer 1

如果您想将数据显示在图表中，我建议您使用ChartJS

它非常简单易用，适用于多种类型的图表和配置。

//1st Separate your content into 2 arrays one with data and another with name in your controller.

$scope.nameArray=[];
$scope.todosArray=[];
$scope.series=[];
//This is the labels name
$scope.series.push("Coffee");

for (var i = 0, length = $scope.coffeeData.length; i < length; i++) {
  nameArray.push($scope.coffeeData[i].name);
  todosArray.push($scope.coffeeData[i].todos);
}

//2 then in your html in the place where you want to insert the chart (of course u need to install the chartJS

 <div id="chart" class="chartCoffee">
     <canvas id="coffeeChart" class="chart chart-line" chart-data="todosArray" chart-labels="nameArray" chart-legend="true" chart-series="series">
      </canvas>
  </div>

angularjs无法显示谷歌图表

1 个答案: