Диаграмма визуализации Google, размер в процентах

Ответ 1

Во-первых, используйте стили, чтобы установить ваши размеры, а не атрибуты:

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

Диаграмма будет отображаться в размере div по умолчанию, но диаграммы не реагируют. Вы должны подключить обработчик события "изменить размер" к окну (или другому элементу, если вы изменяете размер окна), который перерисовывает диаграмму:

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/

Ответ 4

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

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

Ответ 5

Удалите свойства width и height из параметров скриптов, а затем добавьте следующий стиль на свою страницу

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

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