web-dev-qa-db-ja.com

Google視覚化チャート、パーセンテージでのサイズ

グーグルチャートのサイズをパーセンテージで設定するにはどうすればよいですか？これはhtmlにあります：

<div id="chart_div" width="90%" height="20%"></div>

また、jsのオプションには幅も高さもありません。

ただし、グラフのサイズはビューポートに適合しません。

google-visualization
21
Louis

まず、属性ではなくスタイルを使用してディメンションを設定します。

<div id="chart_div" style="width: 90%; height: 20%;"></div>

デフォルトでは、チャートはdivのサイズで描画されますが、チャートは反応しません。チャートを再描画するウィンドウ（またはウィンドウ内でサイズを変更する場合は他の要素）に「サイズ変更」イベントハンドラーをフックする必要があります。

function resizeChart () {
    chart.draw(data, options);
}
if (document.addEventListener) {
    window.addEventListener('resize', resizeChart);
}
else if (document.attachEvent) {
    window.attachEvent('onresize', resizeChart);
}
else {
    window.resize = resizeChart;
}
25
asgallant

チャートオプションで$（window）.width（）または$（window）.height（）に適切な係数を掛けることにより

var options = {
        width: $(window).width(),
        height: $(window).height()*0.75
};
11
nole

上記の回答のように、正しいCSSを使用してスタイル設定することをお勧めします。これにより、グリッチの少ないチャートが作成されます。ただし、Javascriptでサイズを変更できます...
https://developers.google.com/chart/interactive/docs/basic_customizing_chart
そのため、チャートを描画するときのオプションについて（上記のchart.draw(data, options)を使用）...

var options = {
    width:400,
    height:300
}

レスポンシブデザインの良いフィドルはこちらです...
http://jsfiddle.net/toddlevy/pyAz5/

4
themrflibble
$(window).resize(function(){
    var container = document.getElementById("chart_div").firstChild.firstChild;
    container.style.width = "100%";

    chart.draw(data, options);
});
2
Janie B

スクリプトのオプションから幅と高さのプロパティを削除し、次のスタイルをページに追加してください

<style>
    .chart {
        width: 100%;
        min-height: 450px;
    }

    .row {
        margin: 0 !important;
    }
</style>
0
Mohammad