调整窗口大小时Google图表重绘/缩放
调整窗口大小时Google图表重绘/缩放
提问于 2012-01-21 12:52:00
如何在调整窗口大小时重画/重缩放google线形图？
回答 8
Stack Overflow用户
回答已采纳
发布于 2013-12-05 03:26:07
要仅在窗口大小调整完成时重绘，并避免多个触发器，我认为最好创建一个事件：
//create trigger to resizeEnd event
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
//redraw graph when window resize is completed
$(window).on('resizeEnd', function() {
drawChart(data);
});Stack Overflow用户
发布于 2012-06-22 06:35:21
Google的原始代码在最后简单地做到了这一点：
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);用一个小的javascript改变它，你可以在窗口调整大小时缩放它：
function resize () {
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
window.onload = resize;
window.onresize = resize;Stack Overflow用户
发布于 2013-07-09 19:24:40
由于每个调整大小事件都会触发多次window.resize事件，因此我认为最好的解决方案是使用smartresize.js和smartdraw()。这限制了每个window.resize的图表重绘次数。
通过使用提供的js，您可以像这样简单地完成此操作：
// Instantiate and draw our user charts, passing in some options (as you probably were doing it)
var chart = new google.visualization.LineChart(document.getElementById('div_chart'));
chart.draw(data, options);
// And then:
$(window).smartresize(function () {
chart.draw(data, options);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8950761
复制相关文章
相似问题