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

Question 1

창 크기 조정시 Google 선 차트를 다시 그리거나 크기를 조정하려면 어떻게합니까?

Question 2

창 크기 조정이 완료되었을 때만 다시 그리고 여러 트리거를 피하려면 이벤트를 만드는 것이 좋습니다.

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

Question 3

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;

Question 4

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

Question 5

이것은 브라우저에 너무 많은 스트레스를주지 않고이 작업을 수행 할 수있는 가장 간단한 방법입니다.

    var chart1 = "done";

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

차트가 다시로드되기 전에 1 초만 기다리면이 대기 기간에 함수가 다시 호출되지 않습니다. 창 크기 조정 함수는 창 크기를 변경할 때마다 여러 번 호출되므로 창 크기를 변경할 때마다 함수가 실제로 한 번만 작동하도록하고 나머지 호출은 if 문에 의해 중지됩니다.

이게 도움이 되길 바란다

Question 6

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).

다음은 반응 형 차트의 두 가지 예입니다 .

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

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

Question 7

창 크기 조정시 Google 라인 차트를 다시 그리거나 크기를 다시 조정합니다.

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

Question 8

addEventListener를 사용하여 살 수 있고 IE <9에 대한 지원 부족에 신경 쓰지 않는다면 개인적으로 다음 접근 방식을 선호합니다.

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

setTimeout()및 clearTimeout()함수 의 사용 과 750 밀리 초의 추가 된 지연은 여러 크기 조정 이벤트가 빠르게 연속적으로 실행될 때 약간 덜 집중적으로 만듭니다 (마우스를 사용하여 크기를 조정할 때 데스크톱의 브라우저에서 자주 발생 함).

Question 9

나는 며칠 동안 같은 일에 매달 렸고 이벤트를 추가하는 것이 가장 효과적이라는 것을 알았습니다.

window.addEventListener("resize", drawChart);

함수를 선언 한 후이 줄을 추가하면 제대로 작동합니다.

drawChart를 함수 이름으로 바꿉니다.

Question 10

Tiago Castro의 답변을 사용 하여 데모를 보여주기 위해 선 차트 를 구현했습니다 .

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

스 니펫 확장