Chartjs只渲染循环中的最后一个（离子）

Question

我正在使用Chartjs在我的离子应用中绘制图表。一切正常，除了它呈现最后一个循环。让我们说有对象[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

这是怎么回事 - 每个博客文章中的图表（图片中的所有图片都是馅饼）都绑定到3个对象中的一个，具体取决于图表类型（对于图片，其$ scope.pieData对于所有图表）

其余的是角度如何工作的结果 - $ scope.pieData 的值是什么并不重要 - 当你更新$ scope.pieData时，angular会更新对$ scope的所有引用.pieData（因此图表也会更新）。

在你的情况下，你继续在循环中更新它，所以在循环结束时$ scope.pieData是上一篇文章中的内容，因此你的所有图表都有这些数据。您需要为每个图表

设置一个范围变量

这是一个代码笔，用于说明您的案例中发生的事情 - http://codepen.io/anon/pen/doOqjN（我刚删除了图表以使其更清晰） - 请注意所有值都是3000。

这是带有修复程序的代码集 - 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做任何事情，因为我不确定它应该是什么。