角高图重绘

Question

How can i trigger a redraw in the angular highcharts directive? The problem is i have contained my chart in a tab and it initializes badly. Like this : http://puu.sh/lVg8s/6d9e9f2083.png

If i resize the window it fixes itself for the selected tab instance, but i need to somehow do that as it loads up.

Application.controller('SalesReportsHistoryController', ['ServerActions', '$scope', 'initData', function( ServerActions, $scope, initData ){

    var history = this;

    history.initData = initData.data;

    $scope.$on('$viewContentLoaded', function () {
        $(window).resize(function () {
            console.log('resized!');
        });

        $(window).resize();
    });

... etc more code

This is what i tried, but no dice. The resize event fires, and if i fire it in the console it works as i expect, but not on load.

Answer 1

I suppose that you have full control over your data and know precisely when it's available or not. If the answer is yes, you can add an ng-if directive on the highcharts directive that triggers the repaint.

<div ng-if="showChart">
    <highchart></highchart>
</div>

Then in your controller then you can set $scope.showChart to either true or false depending on the availability of the chart's data. If that does not work, you can always set a timeout on $scope.showChart so it will be true only after whole DOM has been rendered.