本文介绍了HighCharts:如何使用回流来允许在更改大小后自动调整大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我们的 Angular 应用中,我们使用

在最大化函数之后:

现在调整浏览器窗口大小后:

window.onresize = function(event) {console.log('窗口调整大小...');highChart = ScopeFactory.getScope('highChart');highChart.restoreChartSize();console.log('highChart.chartConfig = ', highChart.chartConfig);};

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

解决方案

您可以通过向图表添加一个新方法来实现这一点,该方法将手动触发回流,如下所示:

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

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

这是一个工作示例:jsFiddle

参考来自:github-issue

ng-highcharts 用户更新

为了在使用 ng-highcharts 库时执行此操作,您可以简单地在控制器中拉出具有 highcharts-ng 依赖项的图表对象并添加 reflowNow 函数,像这样:

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

这也是 ng-highcharts 的作者推荐的提取图表以执行自定义作业的方法,如所述 这里 和这个 fiddle.

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%

解决方案

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

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.

这篇关于HighCharts:如何使用回流来允许在更改大小后自动调整大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 07:38
查看更多