Google Chart绘制问题

Question

我正在使用Google Charts构建区域图表。

我将图表作为角度指令。它运作良好（大部分时间）。

有时当页面加载时，图表不会按照它应该看起来绘制（见下图）

这是我获取图表数据的方式：

Chart.getHistoricalEstimates(scope.guid, lsUser)
    .then(function(results) {
      angular.extend(scope, {
        estimates: results,
        loaded: true
      });
    }, function(err) {
      scope.error = err;
    });

所以我的服务名为“Chart”，当数据准备就绪时，loaded的值设置为true。

在我的指令中，我看loaded范围：

scope.$watch('loaded', onChartReady);

并调用此函数：

function onChartReady(nVal) {
 if (nVal === true) {
   drawChart()
     .then(function(data) {
       angular.element($window).triggerHandler('resize');
     });
 }

}

drawChart函数设置为承诺$q：

function drawChart() {
    return $q(function(resolve) {
      pureData = scope.estimates.pure;
      chart = new google.visualization.ComboChart(chartElement);

      var data = new google.visualization.arrayToDataTable(scope.estimates.labelled);
      var options = {
        pointShape: 'circle',
        pointSize: 12,
        backgroundColor: 'transparent',
        seriesType: 'area',
        interpolateNulls: true,
        legend: 'none',
        ...
      };

      chart.draw(data, options);

      $timeout(function() {
        resolve();
      }, 0, true);
    });
  }

最后这就是DOM元素的外观：

<area-chart
  ng-if="estimates"
  chart-data="estimates">
</area-chart>

正如我所提到的，图表大部分时间都有效，但有时仍会显示第一张图片。显然，当我在新标签页面中打开页面时，我可以强制解决问题。