圖表未在頁面導航上呈現

Question

我有一個列表頁面（ List.Html ），可以在其中選擇n個行，以便在圖表中直觀地顯示行數據（使用C3 ）。

通過單擊導航到新頁面的按鈕（ 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');

}

列表.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>

圖表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;
}