angularjs ng-repeat 中不显示饼图的条形颜色

Question

你好，我是 angularjs 的新手，下面是我的 html.

代码

<div class="circular-bar" ng-repeat="cat1 in ['15']">
     <div class="chart" data-percent="{{cat1}}" data-bar-color="#e75200">              
          </div>
      </div>

上面代码中饼图条形颜色显示正常但下面代码中条形颜色不正确 display.here categorydata是动态来自database.here数据显示的对象条形图也显示但是barfilled 颜色不显示在下面的代码中。

<div ng-repeat="cat in categorydata">
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 ">
            <!--circular-bar-->

        <div class="circular-bar">

            <div class="chart" data-percent="{{cat.offers.length}}" data-bar-color="#e75200" chart1>
                <label><span class="percent">{{cat.offers.length}}</span></label>

            </div>
        </div>
        <div class="clearfix"></div>

        <div class="offerssub clr1">
            <h3>{{cat.name}}</h3>
            <h4>Redeemed</h4>
            <span>0</span>
        </div>

    </div>
  </div>

这是我的 angularjs 指令。

app.directive('chart1', function() {
  return {
     restrict: 'AEC',
     scope: {
       data: '=',
       categorydata:'=categorydata'
     },
     link: function(elem, attr) {
       $(function() {
         //jQuery(elem).bar
          jQuery('.chart').easyPieChart({
               lineWidth:35,
               scaleColor:false,
               size:330,
               lineCap: 'square',

           });
       });
     }
  }
})

Answer 1

在您的指令中仅设置超时，这将帮助您在填充数据后显示饼图。

当您在 angularjs 中使用任何 jquery 图表时，请遵循以下代码，当时使用超时。

app.directive('chart1', function() {
  return {
  //   restrict: 'A',
    /* scope: {
       data: '=',
       categorydata:'=categorydata'
     },*/
     link: function(elem, attr) {
       $(function() {
         //jQuery(elem).bar
         setTimeout(function () {
           jQuery('.chart').easyPieChart({
                lineWidth:35,
                scaleColor:false,
                size:330,
                lineCap: 'square',

            });
         }, 200);
       });
     }
  }
})

angularjs ng-repeat 中不显示饼图的条形颜色

bar color of the piechart not display in angularjs ng-repeat

javascript

jquery

angularjs

pie-chart

angularjs-directive