web-dev-qa-db-ja.com

ロード時のGoogleチャート幅の設定

私はこれを持っています 私のウェブサイト上のグーグルチャート 。現時点では散布図ですが、あらゆる種類のチャートの解決策が欲しいです。たとえば、700ピクセル幅のウィンドウでサイトをロードすると、チャートの寸法が反応しなくなります。チャートが広すぎます。以下は私が使用しているコードです。

HTML：

<div id="chart_div"></div>

CSS：

#chart_div {
    width:100%;
    height:20%;
}

JS：

var options = {
        title: 'Weight of pro surfer vs. Volume of his pro model',
        hAxis: {title: 'Weight (kg)', minValue: 53, maxValue: 100}, //55
        vAxis: {title: 'Volume (l)'}, //, minValue: 20, maxValue: 40},   //20
        legend: 'none',
           width: '100%',
            height: '100%',
           colors: ['#000000'],
           series: {
                  1: { color: '#06b4c8' }, 
              },
        legend: {position: 'top right', textStyle: {fontSize: 8}},
        chartArea: {width: '60%'},
           trendlines: { 0: {//type: 'exponential',
                    visibleInLegend: true,
                    color: 'grey',
                    lineWidth: 2,
                    opacity: 0.2,
                    labelInLegend: 'Linear trendline\n(Performance)'
                    } 
                }    // Draw a trendline for data series 0.
    };
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));        
    chart.draw(data, options);
    google.visualization.events.addListener(chart, 'ready', myReadyHandler());

    function myReadyHandler() {
        chartDrawn.resolve();       }

編集：div #chart_divは正しいサイズ（cssで設定したサイズ）ですが、このdiv内のグラフはそのサイズを適応しません... enter image description here

jquerychartsresponsive-designgoogle-visualization
12
Louis

Visualization APIチャートはまったく反応しないため、すべてを自分で処理する必要があります。通常、これはウィンドウの「サイズ変更」イベントをリッスンし、チャートを再描画することを意味します（必要に応じて寸法を設定します）。

function resize () {
    // change dimensions if necessary
    chart.draw(data, options);
}
if (window.addEventListener) {
    window.addEventListener('resize', resize);
}
else {
    window.attachEvent('onresize', resize);
}
14
asgallant

私にとっては、上記のどれもうまくいかなかったか、試してみるには複雑すぎました。

私が見つけた解決策はシンプルで、完璧に機能します。通常のGoogleグラフ、私の場合はドーナツグラフを作成し、CSSを使用してスタイルを設定するだけです。

@media screen and (max-width: 1080px) {
    div#donutchart {
        zoom:0.6;
        margin-left:-16%;
    }
}

それで全部です。もちろん、最大幅、ズーム、マージンに他の値を設定して、チャートを完全に合わせることができます。私のグラフは800x600です（ ここで確認できます ）。

5
Olaf

チャートの幅100％を入力し、以下のようにサイズ変更関数を呼び出します

$(window).resize(function(){
   yourCallingChartFunction();
});
3
Azhar Ahmad

レスポンシブロードの場合：

#chart_div {
width:inherit;
height:inherit;
}

ただし、セッション中に画面サイズが変更されると機能しません。

2
Airon Roosalu

Twitter Bootstrapを使用している場合、v3.2以降ではembed-responsiveスタイル：

<div class="embed-responsive embed-responsive-16by9">
  <div id="chart_div" class="embed-responsive-item"></div>
</div>

または、4：3のアスペクト比が必要な場合：

<div class="embed-responsive embed-responsive-4by3">
  <div id="chart_div" class="embed-responsive-item"></div>
</div>
1
Csaba Toth

最善の解決策は、ウィンドウのサイズを変更してチャートビューを変更することです。

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart); 
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Value');
data.addColumn('number', 'Sites');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['valueA', 57, 'Value A is 57', 'stroke-color: #000; stroke-width: 1'],
['valueB', 19, 'Value B is 19', 'stroke-color: #000; stroke-width: 1'],
['valueC', 25, 'Value C is 25', 'stroke-color: #000; stroke-width: 1']
]);
var options = {
colors: ['#fff2af'],
hAxis: {textPosition: 'none',textStyle:{color:'#fff'}},
vAxis: {gridlines: {color: '#fff'},textStyle:{color:'#fff'}},
legend: {position: 'none'},
backgroundColor: '#aadaff'
};
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(data, options);
$(window).resize(function(){
var view = new google.visualization.DataView(data);
chart.draw(view, options);
})
}
0
abdulmnam

より効率的なサイズ変更スニペットは以下にあり、再利用可能です。

//bind a resizing function to the window
$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
}, 500);
});
//usage of resizeEnd

$(window).bind('resizeEnd', function() {
    DoSomething();
});
0
Alex

チャートJSで「幅」プロパティを設定しないでください。これにより、ロード時に幅が自動的に設定されます。

いくつかのコード：

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    // Load the Visualization API and the corechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
            ['Mushrooms', 3],
            ['Onions', 1],
            ['Olives', 1],
            ['Zucchini', 1],
            ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {
            title: "Density of Precious Metals, in g/cm^3",
            height: 400
            //width: 1100, <--- DON'T SET THIS OPTION, it will be set automatically depending on the size of the container div
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>

<!--Div that will hold the pie chart-->
<div id="chart_div" class="mt-3" style="height: 400px; width: 100%; border: 1px solid #CCCCCC"></div>
0
César León