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因为我不知道它应该是对。