javascript - Chartjs 仅渲染最后一个循环( ionic )

Question

我正在使用Chartjs在我的 ionic 应用程序中绘制图表。除了渲染最后一个循环之外，一切都工作正常。假设有对象 [0,1,2]，它只渲染 2，很好地使用 ng-repeat ，它重复 3 次，因为数组中有 3 个对象。我附上我的 View 和控制台日志。

控制台:

应用程序 View :

脚本:

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

发生的事情是这样的 - 每个博客文章中的图表(图片中的所有图表恰好都是饼图)根据图表类型绑定(bind)到 3 个对象之一(对于图片，其 $scope.pieData对于所有图表)

其余部分是 Angular 工作方式的结果 - $scope.pieData 的值是什么并不重要 - 当您更新 $scope.pieData 时，Angular 会更新对 $scope 的所有引用.pieData(因此图表也会更新)。

就您而言，您会在循环中不断更新它，因此在循环结束时 $scope.pieData 是上一篇文章中的内容，因此您的所有图表都有该数据。您需要为每个图表分配一个作用域变量

这是一支代码笔，说明了您的案例中发生的情况 - http://codepen.io/anon/pen/doOqjN (我刚刚删除了 Chartjs 以使其更清晰)- 请注意，所有值都是 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>

而且您实际上并不需要整个脚本 block !

您可能可以进一步优化，但我实际上没有对 numberData.details 做任何事情，因为我不确定它的用途。