javascript HighCharts：如何使用回流来允许在更改大小后自动调整大小

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

提问by Leon Gaban

In our Angular app we're using highcarts-ngfor our HighChartsimplementation.

在我们的 Angular 应用程序中，我们将highcarts-ng用于我们的HighCharts实现。

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.

上面的这个回流功能在这个jsFiddle 中工作得很好，但在我们的应用程序中却没有。

The full Gist file of our HighChartsDirective file.

我们的 HighChartsDirective 文件的完整 Gist 文件。

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 restoreChartSizefunction, which activates the reflow.

单击最大化后，图表将扩展到浏览器窗口的完整大小，但在拖动以调整浏览器窗口大小后，我调用了该restoreChartSize函数，该函数激活了回流。

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

但是图表的大小不会自动调整大小 100% 100%，它会回到图表的先前大小:(

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%

^ 回到较小的静态尺寸，而不是 100% 自动调整尺寸

回答by Shaunak

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()

然后，每当您想摆脱使用 setSize() 手动调整大小时，只需调用 chart.reflow()

Here's an working example: jsFiddle

这是一个工作示例：jsFiddle

Reference taken from: github-issue

参考资料来自：github-issue

UPDATE for ng-highcharts users

更新 ng-highcharts 用户

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

为了在使用 ng-highcharts 库时执行此操作，您可以简单地在具有highcharts-ng依赖项的控制器中拉出图表对象并添加reflowNow函数，如下所示：

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 hereand this fiddle.

这也是 ng-highcharts 的作者推荐的拉出图表以执行自定义作业的方法，如此处和此fiddle 所述。

回答by jaredwilli

I ended up finding an alternative solution to be the only thing I could get working, and it actually was pretty simple and straight forward to do. In case anyone else is looking for a fix for this, here's links to the resources that were useful and solved the issue for me.

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

You can simply add this to your chart config object, at the same level as the config.series or config.options. The comment references info but the actual solution that worked for me uses $timeout with 0 seconds, here

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

*For using highcharts-ngobviously

*highcharts-ng明显使用

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

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);
    }
};