Google图表重绘/缩放窗口大小
如何重新绘制/重新调整窗口大小的谷歌折线图？
只有当窗口大小调整完成并避免多个触发器时才能重绘，我认为最好创build一个事件：
//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); }); Google最初的代码只是在最后这样做：
var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options);
改变它与一个小的JavaScript，你可以缩放窗口时resize：
function resize () { var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } window.onload = resize; window.onresize = resize;
由于window.resize事件在每个resize事件触发多次，我相信最好的解决scheme是使用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); });
这是我能做到这一点的最简单的方法，而不会给服务器造成太大的压力：
var chart1 = "done"; $(window).resize(function() { if(chart1=="done"){ chart1 = "waiting"; setTimeout(function(){drawChart();chart1 = "done"},1000); } });
它所做的只是在图表重新加载之前等待1秒钟，并且不会在此等待期间再次调用该函数。 因为任何时候改变窗口大小都会调用窗口大小调整函数多次，这有助于使函数每次改变窗口大小的时候实际上只工作一次，其余的调用被if语句停止。
我希望这有帮助
Google可视化API中没有选项可以使Google图表响应。
但是， 我们可以使Google图表响应为窗口大小调整 。 为了使Google图表响应，在GitHub上提供了jQuery库-jquery-smartresize根据MIT License授权，可以在窗口大小调整事件中调整图表大小。
GitHub上的这个项目有两个脚本文件：
jquery.debouncedresize.js: adds a special event that fires once after the window has been resized.
＆
jquery.throttledresize.js: adds a special event that fires at a reduced rate (no more double events from Chrome and Safari).
以下是响应图表的两个示例 …
- 响应Google饼图
- 响应式Google条形图
我们可以更改visualization_wrap的底部填充以匹配图表的所需长宽比。
Calculate as Height / Width x 100 For a 16x9 display it would be 9/16 = 0.5625 x 100 = 56.25% For a square it'd be 100%
我们可以自定义Google Chart的chartarea选项， 以确保标签在resize时不会被切断 。
重新绘制/重新调整窗口大小的Google线图：
$(document).ready(function () { $(window).resize(function(){ drawChart(); }); });
我个人更喜欢以下的方法，如果你可以使用addEventListener，并且不介意缺less对IE <9的支持。
var windowResizeTimer; window.addEventListener('resize', function(e){ clearTimeout(windowResizeTimer); windowResizeTimer = setTimeout(function(){ chart.draw(data, options); }, 750); });
请注意，使用setTimeout()和clearTimeout()函数以及750毫秒的延迟时间，当多个resize事件快速连续触发时，这会稍微减less一些时间（在使用鼠标resize时，桌面上的浏览器通常会出现这种情况）。
使用蒂亚戈·卡斯特罗的答案，我已经实施了一个折线图来显示演示。
google.load('visualization', '1', { packages: ['corechart', 'line'] }); google.setOnLoadCallback(drawBackgroundColor); function drawBackgroundColor() { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Compute Time'); data.addColumn('number', 'Compute Times'); console.log("--"); data.addRows([ [0, 0, 0], [10, 10, 15], [20, 20, 65] ]); console.log(data); var options = { height: 350, legend: { position: 'bottom' }, hAxis: { title: 'Nb Curves' }, vAxis: { title: 'Time (ms)' }, backgroundColor: '#f1f8e9' }; function resize() { var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } window.onload = resize(); window.onresize = resize; }
<script src='https://www.google.com/jsapi'></script> <div id="chart_div">
