Question

我在制作关于图表的离子应用程序时遇到问题当页面第一次加载＆＃34;项目1＆＃34;时，无法获得响应。和＆＃34;纽约＆＃34;作为初始选择的选项，如下面的屏幕截图： initial selected option

controller.js

.controller('DashCtrl', ['$scope', '$q', '$http', '$timeout', '$interval', '$state', '$filter', '$location', 'DOLLTYPE', 'REGION', function($scope, $q, $http, $timeout,  $interval, $state, $filter, $location, DOLLTYPE, REGION) {
   $http
    .get('js/data2.json')
    .then(function(region) {

        var i = region.length -1;

        for (i; i >= 0; i--) {
            REGION.add(region[i]);
        };

    })
    .catch(function(error){
        console.log('Error fetching region data: ', error)
    })

    $http
    .get('js/data.json')
    .then(function(result) {

        var i = result.length -1;

        for (i; i >= 0; i--) {
            DOLLTYPE.add(result[i]);
        };

    })
    .catch(function(error){
        console.log('Error fetching doll data: ', error)
    })

 $scope.title = "Dashboard";


 $scope.dash = [];
 $scope.datas = [];
 $scope.avg = [];
 $scope.avgy = [];
 $scope.data = [[]];
 $scope.labels = [[]];
 $scope.date = [];


 $scope.place = [];
 $scope.ayv = [];

 $scope.dolltype = [];
 DOLLTYPE
     .all()
     .then(function(dolltype){ 
         $scope.dolltype    = dolltype;
         $scope.dash2       = $scope.dolltype[0];
     });


 $scope.regiontype = [];
 REGION
     .all()
     .then(function(regiontype){ 
        $scope.regiontype = regiontype;
        $scope.dash1      = $scope.regiontype[0];
     })

 $scope.change = function(dash1) {
  $scope.place = dash1;
 }

 $scope.change2 = function(dash2) {
   $scope.doll= dash2.id;
 }


 $scope.place.name = 'Please select';

 $scope.$watchCollection('[place, doll]', function(newVal, oldVal) {
  $scope.colours = [
      { // Blue
        fillColor: 'rgba(148,159,177,0)',
        strokeColor: 'rgba(47,64,200,1)',
        pointColor: 'rgba(67,43,177,1)',
        pointStrokeColor: '#fff',
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(148,159,177,0.8)'
      },
      { // Red
        fillColor: 'rgba(77,83,96,0)',
        strokeColor: 'rgba(200,15,9,1)',
        pointColor: 'rgba(190,50,11,1)',
        pointStrokeColor: '#fff',
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(77,83,96,1)'
      },
       { // Green
        fillColor: 'rgba(77,83,96,0)',
        strokeColor: 'rgba(18,177, 26,1)',
        pointColor: 'rgba(80,200,11,1)',
        pointStrokeColor: '#fff',
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(77,83,96,1)'
      }
    ];


 $http.get('js/data4.json').success(function(result) { 
   var deferred = $q.defer();
   $scope.dash.msg  = result.message;
   $scope.prices = result.data;
   deferred.resolve($scope.prices);
   angular.forEach($scope.prices,function(value,index){
   var values =  {
                  value : value.value,
                  date : new Date(value.created_at.replace(/-/g,"/"))
    };

    $scope.datas.push(values.value);
    $scope.dash.price = $scope.datas[2];
    $scope.date.push($filter('date')(values.date,'dd-MMM'));    
    $scope.date.splice(2); 
    return deferred.promise;       
    })}).error(function(data, status) {


   console.error('Error', status, data);
   }); //End get price value

 $http.get('js/data5.json').success(function(result) { 
   $scope.averageprice = result.data;
   angular.forEach($scope.averageprice,function(value,index){
   var avgvalue =  {
                    average: value.average,
                    date : new Date(value.created_at.replace(/-/g,"/"))
    };
    console.log (avgvalue);
    $scope.avg.push(avgvalue.average);
    })}).error(function(data, status) {


   console.error('Error', status, data);
   }); //End get average price value

   var deferred = $q.defer();
   $http.get('js/data3.json').success(function(result) { 
   $scope.averageyearprice = result.data;
   deferred.resolve($scope.averageyearprice);
   console.log ($scope.averageyearprice);
   $scope.avgy.push($scope.averageyearprice.yearly_average);
   return deferred.promise;
   }).error(function(data, status) {


  }); //End get average year price value

  $scope.data[0] = $scope.datas;
  $scope.data[1] = $scope.avg;
  $scope.data[2] =  $scope.avgy;

  $scope.labels = $scope.date;
  console.log ($scope.data[0]);

  $scope.series = [$scope.place.name, 'All (Average)', 'All (YTD Year)']; 
  console.log ($scope.series); // Add information for the hover/touch effect

 })

}])

HTML模板

<ion-view cache-view="false" view-title="{{title}}">
    <ion-nav-bar class="nav-title-slide-ios7 bar-assertive"></ion-nav-bar> 
 <ion-content class="has-header"> 
      <div class="list">
          <div class="row item">
            <div class="col text-left assertive">   <select name='options' ng-model="dash2" ng-change="change2(dash2)" ng-options="DOLLtype as DOLLtype.name  for DOLLtype in dolltype">

             </select></div>
           <div class="col text-right assertive"> <select name='options' ng-model="dash1" ng-change="change(dash1)" ng-options="REGIONtype as REGIONtype.name for REGIONtype in regiontype">
             </select></div>
           </div>
           <div class="row item">
             <div class="col">Current Price</div>
             <div class="col text-right assertive">{{dash.price}} %</div>
             </div>
            </br>
            <div class="row item" id="container">
              <div class="col text-center">
                        <p>{{dash.msg}}</p>
                 <canvas id="line" class="chart chart-line" data="data" labels="labels" series='series' height="100" legend="true" colours="colours"></canvas>
               </div>
              </div>
  </ion-content>
</ion-view>

我正在为我的应用使用angular chart plugin。任何人都可以帮我解决这个问题吗？请查看此full example code的链接。

Answer 1

您的图表指令与data（和labels ...）相关联。

data设置在$scope.$watchCollection place和doll内。

这些2只会在$scope.change和$scope.change2

中更改

这两种方法只在您的ng-change中调用。因此，除非您更改下拉列表，否则有效data是未定义的。

如果您手动调用$scope.$watchCollection中的代码，则应该可以解决部分问题。

在Ionic第一次加载页面时，图表无法获得响应

1 个答案: