ウィンドウのサイズ変更時に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);

小さなJavaScriptで変更すると、ウィンドウのサイズが変更されたときに拡大縮小できます。

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()。これにより、1つあたりのグラフの再描画の数が制限されます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秒間待機するだけで、この待機期間中に関数が再度呼び出されることはありません。ウィンドウサイズ変更関数はウィンドウサイズを変更するたびに複数回呼び出されるため、ウィンドウサイズを変更するたびに関数が実際に機能するのは1回だけであり、残りの呼び出しはifステートメントによって停止されます。

これがお役に立てば幸いです

Question 6

Google Visualization APIには、GoogleChartsをレスポンシブにするオプションはありません。

ただし、ウィンドウのサイズ変更時にGoogleChartをレスポンシブにすることはできます。Google Chartをレスポンシブにするために、GitHubで利用可能なjQueryライブラリがあります-MITライセンスの下でライセンスされたjquery-smartresizeは、ウィンドウのサイズ変更イベントでグラフのサイズを変更する機能を備えています。

GitHubのこのプロジェクトには2つのスクリプトファイルがあります：-

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

レスポンシブチャートの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 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()andclearTimeout()関数の使用と、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">

スニペットを展開