Highcharts showLoading流离失所

Question

当我调用图表的showLoading方法时，会出现显示加载屏幕但位置错误。我不确定是什么造成这种情况。我创建了一个plunk（http://plnkr.co/edit/FdBqoPJZmopNc4s33Jcg）但是我无法用plunk重现错误的行为。

$scope.renderColumnChart = function (date) {
    var chart = {};
    $.each(Highcharts.charts, function (index, c) {
        if (c && c.renderTo.id === "column-chart")
            chart = c;
    });
    $scope.columnChartConfig.series = [];

    $scope.columnChartConfig.title.text = moment(date).format("DD.MM.YYYY");
    $scope.columnChartUrl = SharedService.createUrl(SharedService.createUrlDataByPeriod($scope.dimension, SharedService.getPeriodFromDate($scope.dimension, date), date, 0, 0, 1, [19]));

    chart.showLoading(); //TODO show loading wrong place
    $q.all([
        ColumnChartService2.getData($scope.columnChartUrl, globalConfig.oDataServer + globalConfig.ageGroups)
    ]).then(function (result) {
        $scope.columnChartConfig.series.push({
            name: "Personen pro Altersgruppe",
            color: Highcharts.getOptions().colors[0],
            data: result[0].data
        });
        //chart.hideLoading();
    });
}

问候

其他信息

以下是角度控制器和html模板的完整代码。

控制器

ManagementReporting.controller("CustomerHeadCountController", ['$rootScope', '$scope', '$q', 'globalConfig', 'SharedService', 'MultiLineChartService', 'ColumnChartService2',
function ($rootScope, $scope, $q, globalConfig, SharedService, MultiLineChartService, ColumnChartService2) {
SharedService.cleanUpCharts();
$scope.title = 'Customer Head Count';

var init = function () {
    $scope.dimension = SharedService.getGranularity()[0];
    var ranges = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    $scope.before = ranges[3];
    $scope.after = ranges[5];
    $scope.referenceDate = new Date(moment().subtract("month", 0).format("YYYY-MM-DD"));
    $scope.period = SharedService.getPeriods($scope.dimension, $scope.referenceDate).period;
};
init();

// TODO add charts

$scope.refresh = function () {
    $scope.processCharts();
};

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////  EVENTS  ////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// when route change!!!!
$scope.$on('$routeChangeSuccess', function () {
    $rootScope.$broadcast('change.activeSite', 'Anzahl Kunden auf basis verrechneter Einsätze (jeder Kunde in der Dimension einmalig gezählt)');
    $scope.processCharts();
});

$scope.processCharts = function () {
    $("#modal-processing-report-data").modal("show");
    $scope.lineChartConfig = MultiLineChartService.getConfig();
    $scope.lineChartConfig.series = [];

    $scope.url = SharedService.createUrl(SharedService.createUrlDataByPeriod($scope.dimension, $scope.period.value, $scope.date, $scope.before, $scope.after, 1, [17]));
    $scope.urlRegression = SharedService.createUrl(SharedService.createUrlDataByPeriod($scope.dimension, $scope.period.value, $scope.date, $scope.before, $scope.after, 1, [21]));


    $scope.columnChartConfig = ColumnChartService2.getConfig();
    $scope.columnChartConfig.series = [];

    $q.all([
        MultiLineChartService.getData($scope.url),
        MultiLineChartService.getRegressionData($scope.urlRegression)
    ]).then(function(result) {
        $scope.lineChartConfig.series = result[0].data;
        $scope.lineChartConfig.series.push(result[1].data);
        $scope.renderColumnChart($scope.date);

        var normal = Enumerable.from(result[0].data).where(function(record) {
            return record.name === "Normal";
        }).toArray()[0];

        $scope.average = parseFloat(normal.avg.toFixed(2));
        $scope.minimum = normal.min;
        $scope.maximum = normal.max;
        $("#modal-processing-report-data").modal("hide");
    });
}

$scope.$on('multilinechart.click', function (angularEvent, highchartEvent, point) {
    var date = new Date(highchartEvent.point.x);
    $scope.renderColumnChart(date);
});

$scope.renderColumnChart = function (date) {
    var chart = {};
    $.each(Highcharts.charts, function (index, c) {
        if (c && c.renderTo.id === "column-chart")
            chart = c;
    });
    $scope.columnChartConfig.series = [];

    $scope.columnChartConfig.title.text = moment(date).format("DD.MM.YYYY");
    $scope.columnChartUrl = SharedService.createUrl(SharedService.createUrlDataByPeriod($scope.dimension, SharedService.getPeriodFromDate($scope.dimension, date), date, 0, 0, 1, [19]));

    //chart.showLoading(); //TODO show loading wrong place
    $q.all([
        ColumnChartService2.getData($scope.columnChartUrl, globalConfig.oDataServer + globalConfig.ageGroups)
    ]).then(function (result) {
        $scope.columnChartConfig.series.push({
            name: "Personen pro Altersgruppe",
            color: Highcharts.getOptions().colors[0],
            data: result[0].data
        });
        //chart.hideLoading();
    });
}
}]);

HTML模板

<div>
<!--
    <div class="row">
        <div data-ng-include="selectionHeader.url"></div>
    </div>
-->

<div class="dateselector"
     data-dimension="dimension"
     data-before="before"
     data-date="date"
     data-period="period"
     data-after="after"
     data-refresh="refresh()">
</div>

<div class="well">
    <highchart id="line-chart"
               data-config="lineChartConfig"
               data-chart="lineChart" />
    <div class="text-center">
        <span translate>Minimum: </span> {{minimum}}, <span translate>Maximum: </span> {{maximum}}, <span translate>Durchschnitt: </span> {{average}}
    </div>
</div>

<div class="well">
    <highchart id="column-chart"
               data-config="columnChartConfig"
               data-chart="columnChart" />
</div>

<!-- Modal Section -->

<div class="modal fade" id="modal-processing-report-data" tabindex="-1" role="dialog" aria-labelledby="modal-processing-report-data-label" aria-hidden="true" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-processing-report-data-label">Processing...</h4>
            </div>
            <div class="modal-body">
                <div class="progress progress-striped active">
                    <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>