2

Actualmente tengo el siguiente código donde hago la comparación de dos datos y que los grafique en un gráfico de barra, el problema es que el ancho de la barra es muy grueso y quiero reducirlo, si yo ingreso más datos en dicho gráfico el ancho de la barra se reduce pero si dejo solo dos el automáticamente aumenta y me gustaría que se quede del ancho de mi preferencia, a continuación el código:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Nombre', 'campo1', 'campo2'],
          
          ['Campo1 / Campo2', 50000, 20000]

          /*['Enviados / Devueltos', 8000,7000],
          ['Enviados / Reenviados', 5600,3200],
          ['Enviados / Alcanzados', 4500,2600],
          ['Enviados / Devueltos', 1500,2500],*/
        ]);

        var options = {
          width: 700,
          height: 400,
          chart: {
            title: 'Estado de las campañas',
            subtitle: 'Estado de la campaña: '
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'brightness' }, // Bind series 0 to an axis named 'distance'. cambiado bright por brightness
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'Estado de las campañas'} // Top x-axis.
            }
          }

        };

      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="dual_x_div"></div>
  </body>
</html>

Si yo manipulo los siguientes datos:

var options = {
          width: 700,
          height: 400,

Puedo cambiar todo el tamaño del gráfico incluyendo el fondo, pero solo quiero cambiar el ancho de las barras, que no sean tan gruesas. Muchas gracias de antemano.

1 respuesta 1

2

Utilizando groupWidth puedes cambiar el ancho de las barras.

Aqui tienes un fiddle funcionando: https://jsfiddle.net/5o2jyavu/

var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "10%" }
        };

Si te fijas dentro de options agregas bar: { groupWidth: "10%" } donde el groupWidth es el tamaño que quieres.

Edit: para mostrar el tamaño de uno solo no hay un parametro, pero puedes hacer algo no tan bonito pero que funcione, agregar valores nulos para que se modifique el tamaño.

Prueba con estos datos y veras que solo se muestra 1 valor con el tamaño que quieres.

var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          [" ", 0],
          [" ", 0],
          [" ", 0],
          [" ", 0],
        ]);

También seria fácilmente de implementar, ya que si tu data es > 1 no hace falta que agregues nada vació.

Fiddle

5
  • Elimina todos los datos que estas graficando y deja solo este ["King's pawn (e4)", 44] para que veas que te lo amplía. el 9 ago. 2018 a las 12:58
  • Edito la respuesta con la solución a ver que te parece. el 9 ago. 2018 a las 13:01
  • El problema es que si asigno valores en 0 en la gráfica me los va a colocar, solo que vacíos, exactamente como "undefined", y lo que yo quiero es tener un solo dato graficado y del ancho de mi preferencia. el 9 ago. 2018 a las 13:13
  • Si le pones un espacio ([" ', 0]) en vez de nada (["",0]), no te va a aparecer undefined. Creo que la forma que pides no se puede hacer, lo mio es un "hack" para que se parezca a lo que pides. el 10 ago. 2018 a las 9:32
  • Igualmente me mantengo en búsqueda a través de los foros de google, se agradece el esfuerzo colega! el 10 ago. 2018 a las 15:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.