Chartjs只使用<a href="http://www.chartjs.org/" rel="nofollow noreferrer">Chartjs</a>繪製圖表在我的應用程序離子（離子）

Question

進出口呈現最後在循環。一切工作正常，除了它呈現最後一個循環。假設有對象[0,1,2]，它只呈現2，很好使用ng-repeat，它自從數組中的3個對象重複3次。不適合附上我的看法和控制檯日誌。

控制檯：

應用程序的查看：

腳本：

for(i in blogs.data) { 
    if(blogs.data[i].post_type_id == 3) { 

     var chartdraw = JSON.parse(blogs.data[i].chart.data); 

     if(blogs.data[i].chart.chart_type_id == 1){ 
      $scope.pieData = chartdraw; 
      $log.info('pieData:',$scope.pieData); 
     } 
     else if(blogs.data[i].chart.chart_type_id == 2){ 
      $scope.barData = chartdraw; 
      $log.info('barData:',$scope.barData); 
     } 
     else if(blogs.data[i].chart.chart_type_id == 3){ 
      $scope.lineData = chartdraw; 
      $log.info('lineData:',$scope.lineData); 
     } 
     else if(blogs.data[i].chart.chart_type_id == 4){ 
      $scope.numberData = chartdraw; 
      $log.info('numberData:',$scope.numberData); 
     } 

    } 
} 

觀點：

 <div class="card image" ng-if="blog.post_type_id == 3" > 
     <a href="#/app/home/{{blog.id}}"> 
      <div class="thumb"> 
      <div> 
       <canvas piechart options="chartOptions" data="pieData" width="150" height="150" ng-if="blog.chart.chart_type_id == 1"> 
       </canvas> 
       <canvas barchart options="chartOptions" data="barData" width="150" height="150" ng-if="blog.chart.chart_type_id == 2"> 
       </canvas> 
       <canvas linechart options="chartOptions" data="lineData" width="150" height="150" ng-if="blog.chart.chart_type_id == 3"> 
       </canvas> 
       <div ng-if="blog.chart.chart_type_id == 4"> 
       <p ng-bind-html="numberData.details[0].value"></p> 
       <p ng-bind-html="numberData.details[0].label"></p> 
       </div> 
      </div> 
      <div class="text-center cat-icon"> 
       <span class="icon-wrapper"> 
       <i class="icon ion-stats-bars" style="position:relative;"></i> 
       </span> 
      </div> 
      </div> 

      <h4 class="title">{{blog.title}}</h4> 
      <p class="details"><i class="icon ion-calendar"></i> {{blog.created_at}}</p> 
     </a> 
     </div> 

Answer 1

發生了什麼事是這樣的 - 從每個博客文章的圖表（所有畫面中的那些的恰巧是PIE）是根據圖表上勢必3的一個對象類型（對於圖片來說，其所有圖表的$ scope.pieData）

其餘是角度如何工作的結果 - 無論您$ scope.pieData的值爲是 - 當您更新時$ scope.pieData，角度更新所有對$ scope.pieData的引用（因此圖表得到更新以及）。

在你的情況，你不斷更新它的循環，所以在循環$ scope.pieData的到底是什麼在帖子的最後，因此所有的圖表有數據。你需要有一個範圍變量每個圖表

以下是說明什麼是你的情況發生代碼筆 - http://codepen.io/anon/pen/doOqjN（我只是刪除chartjs使其更清晰） - 注意到所有的值是3000

這裏是與固定的codepen - http://codepen.io/anon/pen/MwbqBM。請注意，這些值現在完全不同。我改變的唯一路線是

<div ng-if="blog.chart.chart_type_id == 1">{{blog.chart.data}}</div> 
<div ng-if="blog.chart.chart_type_id == 2">{{blog.chart.data}}</div> 
<div ng-if="blog.chart.chart_type_id == 3">{{blog.chart.data}}</div> 

而實際上您並不需要整個腳本塊！

你也許可以優化了一點，我其實沒有做任何事情numberData.details因爲我不知道它應該是對。