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

구글의 원래 코드는 마지막에 간단히 다음과 같이 합니다.

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 Charts를 응답할 수 있는 옵션이 없습니다.

하지만 우리는 구글 차트를 윈도우 크기 조정과 같이 반응하도록 만들 수 있습니다.Google Chart가 응답할 수 있도록 GitHub에서 사용할 수 있는 jQuery 라이브러리 - MIT License에 따라 라이센스가 부여된 jQuery-smartresize가 있으며, 이 라이브러리는 창 크기 조정 이벤트에서 그래프 크기를 조정할 수 있습니다.

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. 반응형 구글 파이 차트
2. 반응형 구글 막대 차트

차트의 원하는 가로 세로 비율과 일치하도록 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 차트의 차트 영역 옵션을 사용자 정의할 수 있습니다.

창 크기 조정에서 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를 함수 이름으로 바꿉니다.

다음 접근 방식으로 시도해 봅니다.

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

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

티아고 카스트로의 답변을 활용해 시연을 보여주는 라인 차트를 구현했습니다.

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