Javascript 谷歌图表重绘/缩放窗口调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8950761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google chart redraw/scale on window resize
提问by thecodeparadox
How do I redraw/rescale a google linechart on window resize?
如何在窗口调整大小时重绘/重新缩放谷歌折线图？
采纳答案by Hemerson Varela
To redraw only when the window resize is completed and avoid multiple triggers, I think is better create an event:
要仅在窗口调整大小完成时重新绘制并避免多个触发器，我认为最好创建一个事件：
//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);
});
回答by Tiago Castro
The original code by Google simply does this at the end:
谷歌的原始代码最后只是这样做：
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
Changing it with a little javascript you can scale it when the window resizes:
使用一点 javascript 更改它，您可以在窗口调整大小时缩放它：
function resize () {
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
window.onload = resize;
window.onresize = resize;
回答by Fonsini
Since the window.resizeevent fires multiple times on each resize event, I believe that the best solution is to use smartresize.jsand use smartdraw(). This limits the number of chart redraw's per window.resize.
由于window.resize事件在每个调整大小事件上触发多次，我相信最好的解决方案是使用smartresize.js并使用smartdraw(). 这限制了每个图表重绘的数量window.resize。
By using the provided js you can do it as simply as this:
通过使用提供的 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);
});
回答by Jamie Deakin
This is the simplest way I can work out of doing this without causing too much stress to the browser:
这是我可以在不给浏览器造成太大压力的情况下解决此问题的最简单方法：
var chart1 = "done";
$(window).resize(function() {
if(chart1=="done"){
chart1 = "waiting";
setTimeout(function(){drawChart();chart1 = "done"},1000);
}
});
All it does is wait 1 second before the chart reloads and doesn't let the function call again in this waiting period. as window resize functions are called multiple times any time you change the window size this helps make the function only actually work once each time you change the window size, the rest of the calls get stopped by the if statement.
它所做的只是在图表重新加载之前等待 1 秒，并且在此等待期间不会再次调用该函数。由于每次更改窗口大小时都会多次调用窗口调整大小函数，这有助于使函数在每次更改窗口大小时仅实际工作一次，其余调用将被 if 语句停止。
I hope this helps
我希望这有帮助
回答by OO7
There is no option in Google Visualization API to make Google Charts responsive.
Google Visualization API 中没有使 Google Charts 响应的选项。
But we can make Google Charts responsive as Window Resizes. To make Google Chart responsive there is jQuery library available at GitHub - jquery-smartresizelicensed under MIT License, which has the ability to resize graphs on window resize event.
但是我们可以使 Google Charts 响应 Window Resizes。为了使 Google Chart 具有响应性，GitHub 上提供了 jQuery 库- jquery-smartresize在 MIT 许可下获得许可，它能够在窗口调整大小事件时调整图形大小。
This project on GitHub has two script files :-
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).
Here are two examples of responsive charts...
这是响应式图表的两个示例......
We can change the bottom padding of visualization_wrap to match the desired aspect ratio of chart.
我们可以更改可视化包装的底部填充以匹配所需的图表纵横比。
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%
We can customize chartareaoption of Google Chart to ensure that labels don't get cut off on resizing.
我们可以自定义Google Chart 的chartarea选项，以确保标签不会在调整大小时被切断。
回答by Srinu Basava
Redraw/rescale a Google linechart on window resize:
在窗口调整大小时重绘/重新缩放 Google 折线图：
$(document).ready(function () {
$(window).resize(function(){
drawChart();
});
});
回答by Bwyan
I personally prefer the following approach, if You can live with using addEventListener, and don't mind lack of support for IE < 9.
我个人更喜欢以下方法，如果您可以使用 addEventListener，并且不介意缺乏对 IE < 9 的支持。
var windowResizeTimer;
window.addEventListener('resize', function(e){
clearTimeout(windowResizeTimer);
windowResizeTimer = setTimeout(function(){
chart.draw(data, options);
}, 750);
});
Note the use of the setTimeout()and clearTimeout()functions and the added delay of 750 milliseconds, which makes this slightly less intensive when multiple resize events fire in quick succession (which is often the case for browsers on desktop when resizing using a mouse).
请注意setTimeout()和clearTimeout()函数的使用以及750 毫秒的附加延迟，这使得在快速连续触发多个调整大小事件时的强度略低（使用鼠标调整大小时桌面上的浏览器通常是这种情况）。
回答by Ansh Shrivastava
I've been stuck on the same thing for days and I found out that adding an event works best.
几天来我一直坚持同样的事情，我发现添加事件效果最好。
window.addEventListener("resize", drawChart);
Just add this line after declaring your function and it will work fine.
只需在声明您的函数后添加这一行，它就会正常工作。
Replace drawChart with the name of your function.
将 drawChart 替换为您的函数名称。
回答by b0y
Using Tiago Castro'sanswer, I have implemented a line chartto show the demonstration.
使用Tiago Castro 的回答，我实现了一个折线图来显示演示。
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">