一尘不染

HighCharts:如何使用重排来更改大小后自动调整大小

angularjs

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

这是图表最大化和最小化功能,该功能有效:

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

这是回流功能:

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

上面的此重排功能在此jsFiddle中可完美运行,但在我们的应用程序中无法正常运行。

HighChartsDirective文件的完整Gist文件

单击“最大化”后,图表将展开为浏览器窗口的完整大小,但是在拖动以调整浏览器窗口的大小之后,我调用了该restoreChartSize函数,该函数激活了重排。

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

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

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

在此处输入图片说明

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


阅读 289

收藏
2020-07-04

共1个答案

一尘不染

您可以通过向图表添加新方法来执行此操作,该方法将手动触发重排,如下所示:

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依赖项的控制器中拔出chart对象并添加reflowNow函数,如下所示:

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

这也是拉出图由NG-
highcharts的作者所指出做定制的就业推荐的方式在这里,这小提琴

2020-07-04