由于 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

您应该在配置中添加工具提示和绘图选项。如：

    tooltip: {
        pointFormat: '{point.name}: <b>{point.y:.1f}</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.y:.1f}',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },

Answer 2

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

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

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

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

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

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

Pie Chart is not showing correct value due to asynchronous data retrieve in Angular JS

javascript

angularjs

highcharts

angularjs-directive