在我们的Angular应用中,我们使用highcharts-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%。
vs = $scope
。 - Leon GabanchartObject
中。只需使用相同的对象并向其添加reflowreflowNow
函数即可。我已经在Gist评论中建议了一个添加位置,但它不一定要放在那里。 - Shaunakvs.chartObject.reflowreflowNow = vs.chartObject.reflowNow = function()
正在工作。 - Leon Gaban