谷歌可视化图表，百分比大小答案

【问题标题】：google visualization chart, size in percentage谷歌可视化图表，百分比大小
【发布时间】：2014-06-28 21:35:29
【问题描述】：

如何以百分比设置谷歌图表的大小：我在 html 中有这个：

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

js中的选项中没有宽度和高度。

但图表大小不适应视口。

【问题讨论】：

标签： google-visualization

【解决方案1】：

首先，使用样式来设置尺寸，而不是属性：

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

默认情况下，图表将绘制到 div 的大小，但图表没有响应。您必须将“resize”事件处理程序挂钩到重绘图表的窗口（或其他元素，如果您在窗口内调整大小）：

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;
}

【讨论】：

【解决方案2】：

通过在图表选项中乘以适当的因子到 $(window).width() 或 $(window).height()

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

【讨论】：

这是唯一对我有用的解决方案。谢谢！

【解决方案3】：

Google 建议您像上面的答案一样，使用正确的 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/

【讨论】：

很好的例子 themrflibble，如果你不想要 jQuery，只需使用纯 JavaScript：'window.onresize = function(event) { }'。 JSFiddle

【解决方案4】：

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

    chart.draw(data, options);
});

【讨论】：

【解决方案5】：

请从脚本中的选项中删除宽度和高度属性，然后将以下样式添加到您的页面中

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

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

【讨论】：