在我们的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函数,该函数激活了重排。
restoreChartSize
但是,图表的大小不会变为自动调整大小100%100%,它会返回到图表的先前大小:(
现在,在调整浏览器窗口的大小之后:
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()
chart.reflow()
这是一个工作示例:jsFiddle
参考取自:github-issue
ng-highcharts用户的更新
为此,在使用ng-highcharts库时,只需在具有highcharts- ng依赖项的控制器中拔出chart对象并添加reflowNow函数,如下所示:
highcharts- ng
reflowNow
var chart = this.chartConfig.getHighcharts(); chart.reflowreflowNow = function (){ ... }
这也是拉出图由NG- highcharts的作者所指出做定制的就业推荐的方式在这里,这小提琴。