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

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;

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

Answer 4

这是我可以在不对浏览器造成太大压力的情况下解决这个问题的最简单方法：

    var chart1 = "done";

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

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

我希望这会有所帮助

Answer 5

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

但是我们可以在Google调整大小时使Google图表响应。为了使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).

以下是两个响应式图表示例 ...

Responsive Google Pie Chart
Responsive Google Bar Chart

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

我在同一件事上呆了几天，发现添加一个事件效果最好。

window.addEventListener("resize", drawChart);

只需在声明您的功能后添加此行，它将正常工作。

用函数名称替换drawChart。

Answer 9

试试这些方法

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

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

Answer 10

使用 Tiago Castro 答案，我已实施折线图来展示演示。

＆＃13;

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

＆＃13;

<script src='https://www.google.com/jsapi'></script>
<div id="chart_div">

＆＃13;

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

10 个答案: