web-dev-qa-db-ja.com

ウィンドウのサイズ変更でのGoogleチャートの再描画/スケール

ウィンドウのサイズ変更時にGoogleラインチャートを再描画/再スケーリングするにはどうすればよいですか？

javascriptjqueryresizegoogle-visualization
72
thecodeparadox

ウィンドウのサイズ変更が完了したときにのみ再描画し、複数のトリガーを回避するには、イベントを作成することをお勧めします。

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

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
Tiago Castro

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

これは、ブラウザに過度のストレスを与えることなく、これを実行する最も簡単な方法です。

    var chart1 = "done";

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

グラフがリロードされる前に1秒間待機するだけで、この待機期間中に関数が再び呼び出されることはありません。ウィンドウサイズを変更するたびにウィンドウサイズ変更関数が複数回呼び出されるため、ウィンドウサイズを変更するたびに関数が実際に機能するようになり、残りの呼び出しはifステートメントによって停止されます。

これが役立つことを願っています

4
Jamie Deakin

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

しかし、ウィンドウのサイズ変更としてGoogle Chartsをレスポンシブにすることができます。 Google Chartをレスポンシブにするために、 GitHub-jquery-smartresize で利用可能なjQueryライブラリがあります。MIT License。

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つありますレスポンシブチャートの例 ...

  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
OO7

ウィンドウのサイズ変更時にGoogleの線グラフを再描画/スケール変更します。

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

AddEventListenerを使用して一緒に暮らすことができ、IE <9。

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

setTimeout()およびclearTimeout()関数の使用と、750ミリ秒の遅延の追加に注意してください。マウスを使用してサイズ変更する場合のデスクトップ上のブラウザ）。

0
Bwyan