谷歌图表重绘/缩放窗口调整大小

Question

如何在窗口调整大小时重绘/重新缩放谷歌线图？

Answer 1

要仅在窗口调整大小完成时重绘并避免多个触发器,我认为最好创建一个事件:

//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);
});

Answer 2

谷歌的原始代码最后只是这样做:

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;

Answer 3

由于window.resize事件在每个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);
});