google-visualization - graficos - graficas google javascript

gráfico de visualización de google, tamaño en porcentaje

Question

¿Cómo establece el tamaño de un gráfico de Google en porcentaje? Tengo esto en el HTML:

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

y sin ancho ni altura en las opciones en el js.

Pero el tamaño del gráfico no se adapta a la ventana gráfica.

Gracias

Answer 1

Al multiplicar con el factor apropiado a $ (window) .width () o $ (window) .height () en las opciones del gráfico

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

Answer 2

Elimine el ancho y las propiedades de altura de las opciones en los scripts y luego agregue el siguiente estilo a su página

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

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

Answer 3

Google recomienda que estilice, como la respuesta anterior, con el CSS correcto y esto hace que sea un gráfico menos glitchy. Sin embargo, puedes dimensionarlo en Javascript ...
https://developers.google.com/chart/interactive/docs/basic_customizing_chart
Por lo tanto, para las opciones cuando dibuja el gráfico (usando chart.draw(data, options) como se chart.draw(data, options) arriba) ...

var options = {
    width:400,
    height:300
}

Un buen violín para un diseño sensible está aquí ...
http://jsfiddle.net/toddlevy/pyAz5/

Answer 4

Primero, use estilos para establecer sus dimensiones, no atributos:

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

El gráfico se dibujará al tamaño del div de forma predeterminada, pero los gráficos no responden. Debe enlazar un controlador de eventos "redimensionar" a la ventana (u otro elemento si está redimensionando dentro de una ventana) que vuelve a dibujar el gráfico:

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 5

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

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