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

问题描述

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



最大化功能:





调整浏览器窗口大小后:

  window.onresize = function(event){
console.log('window resizing ...');
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()



这里有一个工作示例:



参考摘自:

使用ng-highcharts库可以简单地拉出控制器中的图表对象, highcharts-ng 依赖项并添加 reflowNow 函数,如下所示:


$ b b

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

通过ng-highcharts的作者拉出图表来做自定义工作,如和此。


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
查看更多