0

下のスクリーンショットのように、最初に選択されたオプションとして「アイテム1」と「ニューヨーク」を使用してページが初めてロードされたときに、グラフに関するイオンアプリを作成すると応答が得られないという問題があります。最初に選択したオプション

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>

アプリに角度チャート プラグインを使用しています。誰でもこの問題を解決するのを手伝ってもらえますか? 完全なサンプル コードについては、このリンクを確認してください。

4

1 に答える 1

0

あなたのチャートディレクティブはdata（そしてlabels...）に結び付けられています。

dataは$scope.$watchCollectionその時計placeとの中にセットされていdollます。

$scope.changeこれら 2 は、とでのみ変更されます。$scope.change2

そして、これらの 2 つのメソッドは、ng-change でのみ呼び出されます。dataプルダウンを変更しない限り、事実上未定義です。

手動でコードを呼び出すと、$scope.$watchCollection問題の一部を解決できるはずです。

于 2015-07-22T13:17:53.587 に答える