0

我有一个谷歌表，我试图扩大它的高度以适应整个容器，但高度不会改变。宽度成功了，但高度不会。

有谷歌图表经验的人能告诉我如何改变这个高度吗？

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

我可以使用以下 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 回答
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这也将取决于您的网页及其 CSS 上的其他内容，如果您有问题，开发人员控制台也可能会帮助您解决这个问题。

于 2016-07-28T20:51:18.817 回答