HighCharts: How to use reflow to allow auto-resize after changing size

Question

In our Angular app we're using highcarts-ng for our HighCharts implementation.

Here is the Chart Maximize and Minimize function, which works:

function expandChartPanel() {
    vm.chartMaxed = !vm.chartMaxed;

    viewHeader = ScopeFactory.getScope('viewHeader');
    highChart  = ScopeFactory.getScope('highChart');

    var chart = highChart.chartObject;
    var highChartContainer       = document.getElementById("highchart-container");
    var highChartContainerWidth  = document.getElementById('highchart-container').clientWidth;
    var highChartContainerHeight = document.getElementById('highchart-container').clientHeight;

    var windowWidth  = window.innerWidth;
    var windowHeight = window.innerHeight;

    if (vm.chartMaxed) {

        vs.savedWidth  = highChartContainerWidth;
        vs.savedHeight = highChartContainerHeight;

        console.log('savedWidth  = ', vs.savedWidth);
        console.log('savedHeight = ', vs.savedHeight);

        root.chartExpanded          = true;
        viewHeader.vh.chartExpanded = true;
        highChart.highChartMax      = true;

        highChartContainerHeight = document.getElementById('highchart-container').clientHeight;
        windowWidth  = window.innerWidth;
        windowHeight = window.innerHeight;

        highChart.chartConfig.size.width  = windowWidth;
        highChart.chartConfig.size.height = windowHeight - 220;

        chart.setSize(windowWidth, windowHeight - 220);
    }
    else {
        root.chartExpanded          = false;
        viewHeader.vh.chartExpanded = false;
        highChart.highChartMax      = false;

        highChart.chartConfig.size.width  = vs.savedWidth;
        highChart.chartConfig.size.height = vs.savedHeight;

        chart.setSize(vs.savedWidth, vs.savedHeight);
    }

    highChart.restoreChartSize();
}

Here is the reflow function:

function restoreChartSize() {
    console.log('restoreChartSize');
    if (!vs.chartObject.reflowNow) {
        vs.chartObject.reflowNow = vs.chartObject.reflowNow = function() {
            this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height');
            this.containerWidth  = this.options.chart.width  || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width');
            this.setSize(this.containerWidth, this.containerHeight, true);
            this.hasUserSize = null;
        }
     }

     vs.chartObject.reflowNow();
}

This reflow function above, works perfectly in this jsFiddle, but not in our app.

The full Gist file of our HighChartsDirective file.

After clicking Maximize, the chart will expand to the full size of the browser window, but then after dragging to resize the browser window, I call the restoreChartSize function, which activates the reflow.

However the size of the chart does not go to auto-size 100% 100%, it goes back to the previous size of the chart :(

Before Maximize:

After the Maximize function:

Now after resizing the browser window:

window.onresize = function(event) {
    console.log('window resizing...');
    highChart = ScopeFactory.getScope('highChart');
    highChart.restoreChartSize();
    console.log('highChart.chartConfig = ', highChart.chartConfig);
};

^ back to the smaller static sizes, not auto-size 100%

Answer 1

You can do this by adding a new method to chart that will manually trigger the reflow like so:

chart.reflowNow = function(){
    this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height');
    this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width');
    this.setSize(this.containerWidth, this.containerHeight, false);
    this.hasUserSize = null;
}

Then whenever you want to get away from manual resizing using setSize() just call chart.reflow()

Here's an working example: jsFiddle

Reference taken from: github-issue

UPDATE for ng-highcharts users

For doing this when using ng-highcharts library, you can simply pull out the chart object in the controller that has highcharts-ng dependency and add the reflowNow function, like so:

var chart = this.chartConfig.getHighcharts();
chart.reflowreflowNow = function (){ ... }

This is also the recommended way to pull out chart to do custom jobs by author of ng-highcharts as noted here and this fiddle.

Answer 2

我最终找到了另一种解决方案，这是我唯一可以工作的方法，实际上它非常简单直接。如果其他人正在为此寻找解决方案，请点击此处链接到有用的资源并为我解决问题。

您可以将其添加到图表配置对象中，与config.series或config.options处于同一级别。注释引用了信息，但是对我有效的实际解决方案使用$ timeout和0秒，这里

*明显使用highcharts-ng

http://plnkr.co/edit/14x7gfQAlHw12XZVhWm0?p=preview

$scope.chartConfigObject = {

    // function to trigger reflow in bootstrap containers
    // see: http://jsfiddle.net/pgbc988d/ and https://github.com/pablojim/highcharts-ng/issues/211
    func: function(chart) {
        $timeout(function() {
            chart.reflow();
            //The below is an event that will trigger all instances of charts to reflow
            //$scope.$broadcast('highchartsng.reflow');
        }, 0);
    }
};