仅在窗口调整大小时的Highcharts渲染系列

Question

使用下面的代码创建图表时，我遇到了一个奇怪的错误。

问题是在我调整浏览器窗口大小之前不会呈现该系列。

调整大小之前：

调整大小后：

html-template中的代码：

<article class="charts-wrapper">
  <single-series-chart data="vm.data"></single-series-chart>
</article>

指令中的代码：

angular.module('app.cdn')
  .directive('singleSeriesChart', singleSeriesChart);

singleSeriesChart.$inject = ['_', 'Highcharts', 'ChartHelper'];

function singleSeriesChart(_, Highcharts, ChartHelper) {
  return {
    restrict: 'AE',
    scope: {
      title: '@',
      data: '=',
      metrics: '=',
      charttype: '=',
      showLoading: '='
    },
    template: '<section class="stackedCharts"><article class="stackedChart" id="volumeChart"></article><article class="stackedChart" id="viewsChart"></article><article class="stackedChart" id="hitsChart"></article></section>',
    link: function(scope, element, attrs) {
      var charts;

      function createChart() {
        Highcharts.setOptions({
          chart: {
            type: 'area'
          }
        });

        volumeChart = new Highcharts.Chart({
          chart: {
            renderTo: 'volumeChart'
          },
          title: {
            text: 'Distributed Volume'
          }

        });
        viewsChart = new Highcharts.Chart({
          chart: {
            renderTo: 'viewsChart',
          },
          title: {
            text: 'Asset Views'

          }

        });
        hitsChart = new Highcharts.Chart({
          chart: {
            renderTo: 'hitsChart'
          },
          title: {
            text: 'Number of Hits'
          }

        });
        charts = [volumeChart, viewsChart, hitsChart];
      }

      scope.$watch('data', function(newValue) {
        if (Object.keys(newValue).length === 3) {
          createChart();
          redrawSeries(newValue, charts);
        }

      }, true);

      function redrawSeries(newValue, charts) {
        for (var i = 0; i < charts.length; i++) {
          if (charts[i].series.length > 0) {
            charts[i].series[0].remove(false);
          }
          charts[i].addSeries({
            name: charts[i].title.textStr,
            color: ChartHelper.getColorByMetric(charts[i].title.textStr)
          }, true);

          _.each(newValue, function(data, index) {
            for (var j = 0; j < data.dataSeries.length; j++) {
              charts[i].series[0].addPoint([data.dataSeries[j].tValue, data.dataSeries[j].value], false, false);
            }
          });
        }

      }
    }
  };

}