javascript - 由于 Angular JS 中的异步数据检索，饼图未显示正确的值

Question

当我在 chrome 中调试时，我可以看到 scope.item.sizeUsed 和 scope.item.freeSpace 的值已加载，但它没有出现在图表中.这两个值很大，例如:2147483648。谁能帮我找到解决方案？

HTML:

 <div>
      <div class="hc-pie" id="aaa" item="dataVolume"></div>
 </div>

Angular JS 指令片段:

.directive('hcPie', function () {
    var firstValue = 1;
    return {
      restrict: 'C',
      replace: true,
      template: '<div id="container" style="margin: 0 auto">aa</div>',
      scope: {
            item: '='
          },
      link: function (scope, element, attrs, filter) {
        var chart = new Highcharts.Chart({
          chart: {
            renderTo: $(element).attr('id')
          },
          title: {
            text: ""
          },
          credits: {
            enabled: false
          },
          series: [{
            type: 'pie',
            data: [
                {
                    name: 'Used Space',
                    y: scope.item.sizeUsed
                },
                {
                    name: 'Free Space',
                    y: scope.item.freeSpace
                }
            ]
          }]
        });
      }
    }
  });

Answer 1

如果图表数据是异步检索的，您需要推迟图表的创建，直到数据可用。

最简单的方法是在带有指令的元素上使用 ng-if，例如:

<div ng-if="ready" class="hc-pie" id="aaa" item="dataVolume"></div>

并在检索数据时将ready设置为true。

演示: http://plnkr.co/edit/2NcubQLEjb2qJfnMJb7C?p=preview