问题描述
在我们的 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:如何使用回流来允许在更改大小后自动调整大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!