창 크기 조정시 Google 차트 다시 그리기 / 크기 조정

창 크기 조정시 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);

약간의 자바 스크립트로 변경하면 창 크기가 조정될 때 크기를 조정할 수 있습니다.

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 를 사용하고 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 문에 의해 중지됩니다.

이게 도움이 되길 바란다

---

Google Visualization API에는 Google 차트를 반응 형으로 만드는 옵션이 없습니다.

그러나 Google 차트를 Window Resizes로 반응 형으로 만들 수 있습니다 . 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 막대 차트

원하는 차트 종횡비와 일치하도록 시각화 랩의 하단 패딩을 변경할 수 있습니다.

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 옵션을 사용자 정의 할 수 있습니다 .

---

창 크기 조정시 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);
});

Note the use of the setTimeout() and clearTimeout() functions and the added delay of 750 milliseconds, which makes this slightly less intensive when multiple resize events fire in quick succession (which is often the case for browsers on desktop when resizing using a mouse).

---

Using Tiago Castro's answer, I have implemented a line chart to show the demonstration.

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

참고URL : https://stackoverflow.com/questions/8950761/google-chart-redraw-scale-on-window-resize