Как установить высоту этой таблицы google?

Question

У меня есть таблица google, в которой я пытаюсь расширить высоту, чтобы она соответствовала всему контейнеру, который его удерживает, но высота не изменится. Ширина сделана успешно, но высота не будет.

Любой, кто имеет опыт работы в графиках Google, может рассказать мне, как изменить эту высоту?

JS Application

код не работает в 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}); 
} 

Answer 1

я был в состоянии установить его с помощью следующего CSS

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

Answer 2

Вы пытались изменить этот opiton?

var options = { 
    width: 410, 
    height: 350 // your desired height 
} 

Answer 3

Я не смог добраться до вашего 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. Это также будет зависеть от того, что еще происходит на вашей веб-странице и ее CSS, консоль разработчика может помочь понять это, если у вас есть проблемы.