Перемальовування / масштабування діаграми Google на зміні розміру вікна

Як перемалювати / масштабувати діаграму рядків Google при зміні розміру вікна?

Щоб перемалювати лише після завершення зміни розміру вікна та уникнення декількох тригерів, я думаю, краще створити подію:

//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, ви можете масштабувати його, коли розмір вікна змінюється:

function resize () {
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

window.onload = resize;
window.onresize = resize;

Оскільки window.resizeподія запускається кілька разів для кожної події зміни розміру, я вважаю, що найкращим рішенням є використання smartresize.js та use 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.

Сподіваюся, це допоможе

В API візуалізації Google немає опції, щоб зробити діаграми Google адаптивними.

Але ми можемо зробити діаграми 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).

Ось два приклади адаптивних діаграм ...

1. Адаптивна кругова діаграма Google
2. Адаптивна гістограма 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%

Ми можемо налаштувати параметр chartarea на Google Chart, щоб гарантувати, що ярлики не обрізаються при зміні розміру .

Перемалюйте / масштабуйте діаграму рядків Google при зміні розміру вікна:

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

Я особисто віддаю перевагу наступному підходу, якщо Ви можете жити за допомогою addEventListener, і не заперечуєте проти відсутності підтримки IE <9.

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

Зверніть увагу , використання setTimeout()і clearTimeout()функції і додаткові затримки в 750 мілісекунд, що робить це трохи менш інтенсивним , коли кілька подій зміни розміру пожежа в швидкій послідовності (що часто буває для браузерів на робочому столі , коли зміна розміру з допомогою миші).

Я затримувався на одній і тій же речі днями, і з’ясував, що додавання події працює найкраще.

window.addEventListener("resize", drawChart);

Просто додайте цей рядок після оголошення вашої функції, і він буде працювати нормально.

Замініть drawChart на ім'я вашої функції.

Використовуючи відповідь Тіаго Кастро , я запровадив лінійну діаграму, щоб показати демонстрацію.

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