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

【问题标题】：Google chart redraw/scale on window resize谷歌图表重绘/缩放窗口调整大小
【发布时间】：2012-02-15 13:41:29
【问题描述】：

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

【问题讨论】：

这应该是可视化api的内置功能！

标签： javascript jquery resize google-visualization

【解决方案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);
});

【讨论】：

【解决方案2】：

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;

【讨论】：

可能值得一提的是，当您通过 ajax 获取“数据”时，在每次调整窗口大小“步骤”时触发 XHTTPRequest 可能会给您的服务器带来一些压力，我认为最好以某种方式缓存 ajax 请求的结果并重用该数据，但您的解决方案对我有用！ +1
对我不起作用，需要在再次绘制之前从 div 中删除旧的结果：$('#chart_div').empty();
window.onload = resize(); 等价于resize(); window.onload = undefined;
它在使窗口变大时如您所描述的那样工作，但如果您缩小窗口，您需要先清空图表 div，正如 Mantas D 指出的那样。 $('#chart_div').empty();这将允许浏览器在重绘图表之前缩小 div。
我喜欢这个解决方案。我不喜欢客户端的计时器或递归函数，为什么要一直使用 CPU 功率？

【解决方案3】：

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

【讨论】：

拼错“选项”->“选项”

【解决方案4】：

这是我能做到的最简单的方法，不会对浏览器造成太大压力：

    var chart1 = "done";

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

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

希望对你有帮助

【讨论】：

简单易用。

【解决方案5】：

Google Visualization API 中没有选项可以让 Google Charts 做出响应。

但是我们可以让 Google Charts 响应窗口大小调整。为了使 Google Chart 具有响应性，在GitHub - jquery-smartresize 上提供了 MIT 许可下许可的 jQuery 库，它能够在窗口调整大小事件时调整图形大小。

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%

我们可以自定义谷歌图表的chartarea选项以确保标签在调整大小时不会被截断。

【讨论】：

【解决方案6】：

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

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

【讨论】：

这真的很低效，因为你只需要调用 chart.draw(data, options);再次。这将获取所有信息并执行重复且不必要的工作。
如何在点击时强制重绘示例我们强制调用resize函数。

【解决方案7】：

我个人更喜欢以下方法，如果您可以使用 addEventListener，并且不介意缺少对 IE

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

注意 setTimeout() 和 clearTimeout() 函数的使用以及 750 毫秒的附加延迟，这使得当多个调整大小事件快速连续触发时（桌面上的浏览器在调整大小时通常是这种情况）使用鼠标）。

【讨论】：

【解决方案8】：

几天来我一直在做同样的事情，我发现添加事件效果最好。

window.addEventListener("resize", drawChart);

在声明你的函数后添加这一行就可以正常工作了。

将 drawChart 替换为您的函数名称。

【讨论】：

【解决方案9】：

试试这些方法

window.dispatchEvent(new Event('resize'))

Chartkick.charts["<id of chart element like chart-1>"].redraw()

【讨论】：

【解决方案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">

【讨论】：