Question

我有一个列表页面（ List.Html ），其中可以选择n行，以便在图表中直观地显示行数据（使用C3）。< / p>

通过单击导航到新页面的按钮（ compareList（））来完成此操作（ Chart.Html ）。问题是图表没有显示在新页面上，可能是因为在页面加载之前加载了图表数据，这意味着找不到需要插入图表的HTML。

如果在列表页面之前加载了图表页面，则会生成图表只有一次点击但随后丢失。

Controller.js

$scope.compareList = function(){
    var total = $scope.array.length;
    var tempArray= [];
    for(var i=0; i<total; i++){
      if($scope.array[i].selected){
        tempArray[i] = $scope.array[i];
      }
    }
    if(comparr.length>0){
      $scope.compGraph(tempArray);
    }
  }


$scope.compGraph = function(array){
var tempData = [];
for(var i=0; i<array.length;i++){
  tempData.push([array[i].name,array[i].evi]);
}

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: tempData,
      type:'bar'
    }
});

$state.go('eventmenu.compare');

}

List.Html

<ion-view view-title="List">
        <ion-nav-buttons side="right">
            <button class="button button-icon icon ion-stats-bars" ng-click="compareList()"></button>
        </ion-nav-buttons>
        <ion-content>
            <ion-item ng-repeat="item in items" class="item-remove-animate">
                <div class="row" >
                    <div class="col col-40"{{ item.name }}</div>
                    <div class="col col-30" style=";">{{ item.area}}m<sup>2</sup></div> 
                    <div class="col col-20" style=";">{{ item.value}}</div>
                    <div class="col col-10  col-top" ><ion-checkbox style="border:none;margin-top: -20px;" ng-model="item.selected"></ion-checkbox></div>
                </div>
            </ion-item>
        </ion-list>   
    </ion-content>
    </ion-view>

Chart.HTML

<ion-view view-title="Land Comparison">
  <ion-content ng-controller="Controller">
        <div class="padding">
                <div id="chart" ></div>
        </div>
  </ion-content>
</ion-view>

Answer 1

我正在使用ng-if图表。设置一个值来监听加载情况并使用它。

在HTML中：

<div class="padding">
    <div ng-if="isDataLoaded" id="chart"></div>
</div>

在控制器中：

$scope.isDataLoaded = false;

function loadData(){
    $scope.myData = [1,2,3];
    $scope.isDataLoaded = true;
}

图表不在页面导航上呈现

1 个答案: