Web/Javascript
구글 차트(Google Chart) 사이즈 resized Script 함수
saltdoll
2016. 12. 6. 07:42
반응형
(인터넷 브라우저)윈도우 창을 줄이거나, 늘리면, Google Chart사이즈는 변동이 없습니다.
Google Chart 내용은 HTML5/SVG객체 기반으로 되어 있기에, 자동으로 사이즈가 변경이 안된답니다.
이를 해결하기 위해서, $(window) 객체에 resize함수 처리를 추가해 줘서, 사이즈에 맞게 다시금 drawing 작업을 추가해 주면, 브라우저의 창의 사이즈가 변경되는 동시에, Google Chart도 사이즈가 변경되게 됩니다.
[Chart 사이즈만 변경하기]
<script>
// Google Chart resize
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
drawVisualization();
}, 200);
});
</script>
윈도우 사이즈를 변경 시, Javascript을 이용해서, Redrawing으로 처리하면, 이쁘게 변경이 된답니다.
//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);
});
출처: http://stackoverflow.com/questions/8950761/google-chart-redraw-scale-with-window-resize
[ Google Chart Resize ]
// Google Chart resize
// create trigger to resizeEnd event
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 00);
});
// redraw graph when window resize is completed
$(window).on('resizeEnd', function() {
drawVisualization();
});
반응형