Tengo este gráficos de google en mi sitio web. Es un gráfico de Dispersión, por ahora, pero me gustaría que la solución para todos los tipos de gráficos.
Si carga el sitio con 700 px de ancho de la ventana por ejemplo, la tabla de dimensiones no son sensibles: el gráfico es demasiado amplia.
A continuación está el código que estoy utilizando.

HTML:

<div id="chart_div"></div>

CSS:

#chart_div {
    width:100%;
    height:20%;
}

JS:

var options = {
        title: 'Weight of pro surfer vs. Volume of his pro model',
        hAxis: {title: 'Weight (kg)', minValue: 53, maxValue: 100}, //55
        vAxis: {title: 'Volume (l)'}, //, minValue: 20, maxValue: 40},   //20
        legend: 'none',
           width: '100%',
            height: '100%',
           colors: ['#000000'],
           series: {
                  1: { color: '#06b4c8' }, 
              },
        legend: {position: 'top right', textStyle: {fontSize: 8}},
        chartArea: {width: '60%'},
           trendlines: { 0: {//type: 'exponential',
                    visibleInLegend: true,
                    color: 'grey',
                    lineWidth: 2,
                    opacity: 0.2,
                    labelInLegend: 'Linear trendline\n(Performance)'
                    } 
                }    //Draw a trendline for data series 0.
    };
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));        
    chart.draw(data, options);
    google.visualization.events.addListener(chart, 'ready', myReadyHandler());

    function myReadyHandler() {
        chartDrawn.resolve();       }

Edit: parece que el div #chart_div tiene el tamaño correcto (el que me puse con css), pero el gráfico dentro de este div no se adapta a su tamaño…se queda bloqueado con
Ver la imagen:
Configuración de Google Gráficos de ancho en el tiempo de carga

  • Usted debe editar la pregunta para especificar que usted está preguntando acerca de la configuración de la anchura en el tiempo de carga, no sobre responsive gráficos.
InformationsquelleAutor Louis | 2014-08-27

9 Comentarios

  1. 13

    Desde la Visualización de la API de gráficos no responden en absoluto, usted tiene que manejar todo por su cuenta. Normalmente, esto significa escuchar por la ventana «cambiar el tamaño» del evento y volver a dibujar el gráfico a continuación (ajuste de las dimensiones según corresponda):

    function resize () {
        //change dimensions if necessary
        chart.draw(data, options);
    }
    if (window.addEventListener) {
        window.addEventListener('resize', resize);
    }
    else {
        window.attachEvent('onresize', resize);
    }
    • gracias por tu respuesta, pero por ahora no estoy evento pensando en adaptar el tamaño del gráfico al cambiar de tamaño el windown, pero sólo lo que es correcto cuando se carga el sitio…para conseguir sus dimensiones a la derecha cuando se carga la página. Resigin el windows va a ser el siguiente paso. ¿Entiende usted ?
    • Si establece las dimensiones de la div de contenedor en CSS como porcentajes, entonces el tamaño de la tabla se establece de forma dinámica basándose en el tamaño de su contenedor.
    • que es lo que yo pensaba y eso es exactamente lo que estoy haciendo ya: he actualizado la pregunta con el html así que usted puede ver. Si puedo cambiar el width valor de 100% a 20% por ejemplo, no cambia el tamaño de la gráfica. Te envie el aquí : boardlineapp.com/#faq
    • Me duplican su carta (jsfiddle.net/asgallant/j3778edd) y no tienen los mismos problemas con las dimensiones. No es probable que algunas de CSS/javascript en otros lugares en su sitio web que está causando el problema.
    • sí, de hecho es raro ! Se puede inspeccionar el sitio web boardlineapp.com/#faq y mire, si usted encuentra alguna interferencia css ? Porque no puedo encontrar nada…muchas Gracias por su ayuda
    • He dado un vistazo por encima, pero nada salió de mí como inmediatamente evidente. Sugiero comentar todo el código que no está directamente relacionado a la carta (todo el javascript y CSS) y volver a habilitar pieza por pieza hasta que el gráfico se rompe; entonces has encontrado el probable culpable detrás de vuestros males.
    • Yo veo que hay algo raro: el div #chart_div en realidad tiene el tamaño correcto, pero el gráfico en el interior se mantiene en el mismo (muy amplio) de tamaño. Por favor, mire la captura de pantalla que he añadido en la pregunta.

  2. 5

    Para mí, ninguno de los de arriba trabajado o estaban demasiado complejo para mí darle una oportunidad.

    La solución que he encontrado es simple y funciona a la perfección. Implica la construcción de un normal de gráficos de Google, en mi caso un donut de gráfico y, a continuación, estilo usando CSS.

    @media screen and (max-width: 1080px) {
        div#donutchart {
            zoom:0.6;
            margin-left:-16%;
        }
    }

    Eso es todo. Por supuesto, usted puede configurar otros valores para max-width, zoom y márgenes para tener su gráfico de ajuste a la perfección. Mi tabla es de 800×600 (usted puede ver aquí).

  3. 3

    poner anchura 100% de la tabla y llamar a la función de cambiar el tamaño de la siguiente

    $(window).resize(function(){
       yourCallingChartFunction();
    });
    • Por favor, nos dan algunos detalles en donde el ancho debe ser puesto (opciones, css, o en cualquier otro lugar) y lo getShotHistory significado para nosotros. Ese fragmento sólo nos dice que escuchemos el evento de cambio de tamaño, no más.
    • usted debe poner su propia función, en lugar de getShotHistory();. He creado mi propio. Usted necesita llamar a la función donde se han de crear funcionalidad de un gráfico. $(window).cambiar el tamaño(function(){ yourChartFunction(); }); es necesario proporcionar el ancho de 100% en su chartChartFunction();
    • Estoy asumiendo que usted está utilizando bootstrap para el diseño de respuesta. Usted necesidad de cubrir toda el gráfico div dentro de otro div con algunas clases como col-sm-12 col-md-4, col-lg-4 o col-sm-12 col-md-6 col-lg-6 lo que quieras como por la exigencia.
  4. 2

    Para responder en la carga de las obras:

    #chart_div {
    width:inherit;
    height:inherit;
    }

    Pero doesnt trabajo cuando el tamaño de la pantalla cambia durante la sesión.

  5. 1

    Si usted está usando Twitter Bootstrap, desde v3.2 se puede aprovechar la embed-responsive estilos:

    <div class="embed-responsive embed-responsive-16by9">
      <div id="chart_div" class="embed-responsive-item"></div>
    </div>

    O si desea 4:3 relación de aspecto:

    <div class="embed-responsive embed-responsive-4by3">
      <div id="chart_div" class="embed-responsive-item"></div>
    </div>
    • esto parece funcionar, ¿me podrías recomendar algunos consejos más tutoriales tengo que combinarlo con una capacidad de respuesta piehole de superposición y el centro de la leyenda
    • ah, y debe ancho de ser 100%??
    • Donde se debe utilizar el 100%?
  6. 0

    Una más eficiente de cambio de tamaño de fragmento es de los de abajo y re-utilizables;

    //bind a resizing function to the window
    $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
    }, 500);
    });
    //usage of resizeEnd
    
    $(window).bind('resizeEnd', function() {
        DoSomething();
    });
  7. 0

    La mejor solución es cambiar el punto de vista gráfico como el de la ventana cambia de tamaño:

    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Value');
    data.addColumn('number', 'Sites');
    data.addColumn({type: 'string', role: 'tooltip'});
    data.addColumn({type: 'string', role: 'style'});
    data.addRows([
    ['valueA', 57, 'Value A is 57', 'stroke-color: #000; stroke-width: 1'],
    ['valueB', 19, 'Value B is 19', 'stroke-color: #000; stroke-width: 1'],
    ['valueC', 25, 'Value C is 25', 'stroke-color: #000; stroke-width: 1']
    ]);
    var options = {
    colors: ['#fff2af'],
    hAxis: {textPosition: 'none',textStyle:{color:'#fff'}},
    vAxis: {gridlines: {color: '#fff'},textStyle:{color:'#fff'}},
    legend: {position: 'none'},
    backgroundColor: '#aadaff'
    };
    var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
    chart.draw(data, options);
    $(window).resize(function(){
    var view = new google.visualization.DataView(data);
    chart.draw(view, options);
    })
    }
  8. 0

    No establecer el «ancho» de la propiedad en el gráfico de JS. En la que se establece el ancho automáticamente en el tiempo de carga.

    Código:

    HTML:

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        //Load the Visualization API and the corechart package.
        google.charts.load('current', {'packages':['corechart']});
    
        //Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChart);
    
        //Callback that creates and populates a data table,
        //instantiates the pie chart, passes in the data and
        //draws it.
        function drawChart() {
    
            //Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows([
                ['Mushrooms', 3],
                ['Onions', 1],
                ['Olives', 1],
                ['Zucchini', 1],
                ['Pepperoni', 2]
            ]);
    
            //Set chart options
            var options = {
                title: "Density of Precious Metals, in g/cm^3",
                height: 400
    	    //width: 1100, <--- DON'T SET THIS OPTION, it will be set automatically depending on the size of the container div
            };
    
            //Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
    
    <!--Div that will hold the pie chart-->
    <div id="chart_div" class="mt-3" style="height: 400px; width: 100%; border: 1px solid #CCCCCC"></div>

    • Antes de downvote debe decir por qué….
    • Esta pregunta no es realmente acerca de la «capacidad de respuesta de los gráficos», es acerca de la configuración de la anchura de la tabla en tiempo de carga.
    • Supongo que tienes votada abajo porque su solución no funcionan
    • Que hace el trabajo…
    • Tienes razón, el problema era de mi lado. Yo estaba dibujando el gráfico antes de DOM debidamente representado de modo que el gráfico representa más pequeño. Si vas a editar tu pregunta, voy a volver mi voto.
    • ¿Qué edición se te sugesting?
    • Nada, por LO que no permiten cambiar la clasificación después de 15 minutos(?) a menos que la respuesta es editado. Usted puede, por ejemplo, mencione que usted tiene que dibujar el gráfico después de DOM se hace tan persona como yo no creo que tu respuesta es incorrecta.

  9. -1

    He encontrado este Código pen ejemplo útil:
    Código pen ejemplo de Google Charts Sensible
    Que hacer volver a dibujar el gráfico de cambio de tamaño de ventana usando jQuery:

    $(window).resize(function(){
       yourCartdrawChartfuntion();
    });
    • Esto puede ser muy pesado muy rápidamente a medida que se disparará con cada píxel de la ventana cambia de tamaño. Usted es mejor de enlace para el evento de cambio de tamaño y dejando un tiempo de espera de frenar las cosas un poco.

Dejar respuesta

Please enter your comment!
Please enter your name here