Question

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

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

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

但图表大小不适应视口。

由于

Answer 1

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

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

默认情况下，图表将绘制为div的大小，但图表不响应。你必须勾选一个＆＃34;调整大小＆＃34;窗口的事件处理程序（或者在窗口中调整大小的其他元素）重绘图表：

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

Answer 2

在图表选项中将适当的因子乘以$（window）.width（）或$（window）.height（）

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

Answer 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/

Answer 4

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

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

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

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

4 个答案: