Google图表重绘/缩放窗口大小

Question 1

如何在窗口调整大小时重新绘制/调整Google折线图的大小？

Question 2

要仅在窗口调整大小完成后才重画并避免多个触发器，我认为最好创建一个事件：

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

Question 3

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;

Question 4

由于该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);
});

Question 5

这是在不给浏览器造成过多压力的情况下解决此问题的最简单方法：

    var chart1 = "done";

$(window).resize(function() {
if(chart1=="done"){
chart1 = "waiting";
setTimeout(function(){drawChart();chart1 = "done"},1000);
}
});

它所做的只是在图表重新加载之前等待1秒钟，并且在此等待时间内不让函数再次调用。由于每次更改窗口大小时都会多次调用窗口调整大小函数，这有助于使函数每次更改窗口大小时仅实际起作用一次，其余调用将被if语句停止。

我希望这有帮助

Question 6

Google Visualization API中没有选项可以使Google Charts响应。

但是我们可以使Google图表响应窗口调整大小。为了使Google Chart具有响应能力，可以在GitHub上使用jQuery库-jquery-smartresize根据MIT许可获得许可，它具有在窗口调整大小事件时调整图形大小的功能。

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).

这是响应图的两个示例...

我们可以更改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选项，以确保标签不会因调整大小而中断。

Question 7

在窗口大小调整时重新绘制/调整Google折线图的大小：

$(document).ready(function () {
    $(window).resize(function(){
        drawChart();
    });
});

Question 8

如果您可以使用addEventListener，并且不介意缺乏对IE <9的支持，我个人更喜欢以下方法。

var windowResizeTimer;
window.addEventListener('resize', function(e){
    clearTimeout(windowResizeTimer);
    windowResizeTimer = setTimeout(function(){
        chart.draw(data, options);
    }, 750);
});

请注意setTimeout()和clearTimeout()功能的使用以及增加的750毫秒的延迟，这在快速连续触发多个调整大小事件时会降低强度（这在使用鼠标调整大小的台式机上通常是这种情况）。

Question 9

我被同一件事困扰了好几天，我发现添加事件效果最好。

window.addEventListener("resize", drawChart);

只需在声明函数后添加此行，即可正常工作。

将drawChart替换为函数名称。

Question 10

使用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">

展开摘要