Cómo personalizar los ejes

Descripción general

Las dimensiones de los datos suelen mostrarse en ejes, horizontales y verticales. Tal es el caso en las siguientes secciones: Area Chart, Bar Chart, Candlestick Chart, Column Chart, Combo Chart, Chart Chart, Steped Area Chart y Diagrama de dispersión.

Cuando creas un gráfico con ejes, puedes personalizar algunas de sus propiedades:

  • Discreto frente a continuo
  • Dirección: Puedes personalizar la dirección con la opción hAxis/vAxis.direction.
  • Posicionamiento y estilo de etiquetas: Puede personalizar el posicionamiento y el estilo de las etiquetas con las opciones hAxis/vAxis.textPosition y hAxis/vAxis.textStyle.
  • Texto y estilo del título de eje: Puedes personalizar el estilo y el texto de título de los ejes con las opciones hAxis/vAxis.title y hAxis/vAxis.titleTextStyle.
  • Escala de eje: Puedes establecer la escala de un eje a escala logarítmica (log) mediante las opciones hAxis/vAxis.logScale o hAxis/vAxis.scaleType.
  • Para obtener una lista completa de las opciones de configuración de los ejes, consulta las opciones de hAxis y vAxis en la documentación de tu gráfico específico.

Terminología

Eje mayor/menor:

  • El eje superior es el eje que se extiende a lo largo de la orientación natural del gráfico. En el eje horizontal de líneas, áreas, columnas, combinaciones, áreas escalonadas y velas. Para un gráfico de barras, es el vertical. Los gráficos de dispersión y circular no tienen eje mayor.
  • El eje menor es el otro.

Eje discreto/continua:

  • Un eje discreto tiene una cantidad limitada de valores espaciados de manera uniforme, llamados categorías.
  • Un eje continuo tiene una cantidad infinita de valores posibles.

Discreto frente a continuo

El eje principal de un gráfico puede ser discreto o continuo. Cuando se usa un eje discreto, los puntos de datos de cada serie se distribuyen de manera uniforme en el eje, según su índice de fila. Cuando se usa un eje continuo, los datos se posicionan según su valor de dominio.

El etiquetado también es diferente. En un eje discreto, los nombres de las categorías (especificados en la columna de dominio de los datos) se usan como etiquetas. En un eje continuo, las etiquetas se generan automáticamente: el gráfico muestra líneas de cuadrícula de espacio uniforme, en las que cada línea de cuadrícula está etiquetada según el valor que representa.

Los siguientes ejes son siempre continuos:

  • Ambos ejes de los diagramas de burbujas.
  • Eje menor.

En los gráficos de líneas, áreas, barras, columnas y velas (y gráficos combinados que contienen solo esas series), puedes controlar el tipo de eje mayor:

  • Para un eje discreto, establece el tipo de columna de datos en string.
  • Para un eje continuo, establece el tipo de columna de datos en uno de los siguientes: number, date, datetime o timeofday.
Discreto / continuo Primer tipo de columna Ejemplo
Discretos string
Continua número
Continua fecha

Escala del eje

Puedes configurar la escala de un eje con la opción scaleType. Por ejemplo, para configurar la escala del eje vertical a escala del registro, usa la siguiente opción:

  vAxis: {
        scaleType: 'log'
  }

En el siguiente gráfico de líneas, se muestra el crecimiento de la población mundial a escala lineal (estándar) y a escala logarítmica.

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

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'GDP');
          data.addRows([
            ['US', 16768100],
            ['China', 9181204],
            ['Japan', 4898532],
            ['Germany', 3730261],
            ['France', 2678455]
          ]);

         var options = {
           title: 'GDP of selected countries, in US $millions',
           width: 500,
           height: 300,
           legend: 'none',
           bar: {groupWidth: '95%'},
           vAxis: { gridlines: { count: 4 } }
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
         chart.draw(data, options);

         document.getElementById('format-select').onchange = function() {
           options['vAxis']['format'] = this.value;
           chart.draw(data, options);
         };
      };
    </script>
  </head>
  <body>
    <select id="format-select">
      <option value="">none</option>
      <option value="decimal" selected>decimal</option>
      <option value="scientific">scientific</option>
      <option value="percent">percent</option>
      <option value="currency">currency</option>
      <option value="short">short</option>
      <option value="long">long</option>
    </select>
    <div id="number_format_chart">
  </body>
</html>

Cuando usas un formato que emplea texto (p.ej., el formato long, que mostrará 8,000,000 como "8 millones"), puedes localizar las strings en otros idiomas mediante la especificación de un código de idioma cuando cargas la biblioteca de Google Charts. Por ejemplo, para convertir "8 millones" en "8 миллиона" en ruso, llama a la biblioteca de la siguiente manera:

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
  google.charts.setOnLoadCallback(drawMarkersMap);
</script>