0

それを保持しているコンテナ全体に合わせて高さを拡張しようとしているGoogleテーブルがありますが、高さは変わりません。幅はうまくいきましたが、高さはうまくいきません。

この高さを変更する方法を教えてくれるGoogleチャートの経験がある人はいますか?

JS アプリケーション

コードは jsFiddle では機能しません。送信ボタンをクリックするだけでグラフが表示されます。データを入力する必要はありません。関連するコードを以下に示します。

CSS:

#mytable{
    display: none;
    margin-top: 60px;
    width: 410px;
    height: 270px; 
    float: right;
    border: 1px solid;
}

#table_div{
    width:410px;
    height: 270px;
}

html:

<div id="mytable"><div id="table_div" ></div></div>

JS:

function drawTableChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'months passed');
    data.addColumn('number', 'money saved');
    data.addRows([
        [6, competitorCost(6) - ourCost(6)],
        [12, competitorCost(12) - ourCost(12)],
        [18, competitorCost(18) - ourCost(18)],
        [24, competitorCost(24) - ourCost(24)]
    ]);

    var options = {
        width: 410,
        height: 270
    }

    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(data, {showRowNumber: false});
}
4

3 に答える 3

0

jsFiddle にアクセスできませんでしたが、できる限りお答えします。同様の例で自分でこれを試しました。変数を宣言しましたoptionsが、それを関数に渡してはいけませんdraw()。

それを保持しているコンテナ全体の高さ全体を埋めるためのいくつかの選択肢があります（これはmytable. パディング、スクロールバー、ボーダーを含む高さが必要な場合は、offsetHeight以下のように使用します。パディングだけが必要な場合はdocument.getElementById('mytable').clientHeight、高さとして使用します。外側のコンテナがウィンドウ全体である場合はwindow.innerHeight、高さとして使用できます。

これがあなたのdrawTableChart機能に必要なものだと思います：

var options = {
    showRowNumber: false,
    width: 410,
    height: document.getElementById('mytable').offsetHeight;
}

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

これを試してもうまくいかない場合は、CSS の他の何かが高さをオーバーライドしている可能性があります。その時点で、ブラウザの開発者コンソール (通常は F12 キーを押してアクセス) または同様のツールを開き、ページの各要素をテーブルから始めて、何が起こっているかがわかるまで調べます。また、開発者コンソールで高さを手動で一時的に変更し、コードを変更する前に変更を確認することもできます。

最後に、オブジェクトwidth: '100%'; height: '100%';内のように幅と高さをパーセンテージに設定することにも成功しました。optionsこれは、Web ページとその CSS で他に何が起こっているかにも依存します。問題が発生した場合は、開発者コンソールがそれを把握するのにも役立ちます。

于 2016-07-28T20:51:18.817 に答える
0

以下のCSSで設定できました

#table_div table{
    width:410px;
    height: 270px;
}
于 2013-07-07T04:38:56.537 に答える
0

このオプションを変更してみましたか?

var options = {
    width: 410,
    height: 350 // your desired height
}
于 2013-07-08T04:52:35.543 に答える