Google chart redraw / масштабирование при изменении размера окна

Как перерисовать / масштабировать линейную диаграмму google при изменении размера окна?

69
google-visualization javascript jquery resize

8 ответов

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

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

исходный код 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;
35

С window.resize событие срабатывает несколько раз на каждое событие resize, я считаю, что лучшее решение-это использовать smartresize.js и использовать smartdraw(). Это ограничивает количество перерисовок диаграммы per 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);
});
7

Это самый простой способ, которым я могу работать, не вызывая слишком большого стресса на сервере:

    var chart1 = "done";

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

все, что он делает, это ждать 1 секунду до перезагрузки диаграммы и не позволяет функции вызывать снова в этот период ожидания. поскольку функции изменения размера окна вызываются несколько раз при каждом изменении размера окна, это помогает сделать функцию фактически работающей только один раз при каждом изменении размера окна, остальные вызовы останавливаются if заявление.

надеюсь, это поможет

3

В Google Visualization API нет возможности сделать Google Charts отзывчивыми.

но мы можем сделать Google диаграммы отзывчивыми, как изменение размера окна. Чтобы сделать Google Chart отзывчивым, есть библиотека jQuery, доступная по адресу GitHub-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 чтобы убедиться, что ярлыки не отрезаются при изменении размера.

3

перерисовать / масштабировать Google linechart при изменении размера окна:

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

Я лично предпочитаю следующий подход, если вы можете жить с использованием addEventListener и не возражаете против отсутствия поддержки IE 

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

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

0

используя Тьяго Кастро ответ, я реализовал графика показать демонстрацию.

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