Personalización de ejes

  1. Overview
  2. Terminología
  3. Discreto o continuo
  4. Escala de eje
  5. Formatos de número

Descripción general

Las dimensiones de los datos suelen mostrarse en ejes, horizontales y verticales. Este es el caso del gráfico de áreas, el gráfico de barras, el gráfico de velas, el gráfico de columnas, el gráfico combinado, el gráfico de líneas, el gráfico de áreas escalonado y el gráfico de dispersión.

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

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

Terminología

Eje mayor/secundario:

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

Eje discreto/continuo:

  • Un eje discreto tiene un número finito de valores espaciados de manera uniforme, llamados categorías.
  • Un eje continuo tiene un número infinito de valores posibles.

Discreto o continuo

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

El etiquetado también es diferente. En un eje discreto, los nombres de las categorías (especificadas 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 espaciadas uniformemente, y cada línea de la cuadrícula se etiqueta según el valor que representa.

Los siguientes ejes son siempre continuos:

  • Ambos ejes de gráficos de burbujas.
  • El 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 del eje principal:

  • 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 / continua Primer tipo de columna Ejemplo
Discreto cadena
Continuo número
Continuo date

Escala de eje

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

  vAxis: {
        scaleType: 'log'
  }

El siguiente gráfico de líneas muestra el crecimiento de la población mundial tanto a escala lineal (estándar) como a escala logarítmica.

Si tus datos contienen valores cero o negativos, puedes trazar los puntos con la opción scaleType: 'mirrorLog'. En la escala logarítmica duplicada, el valor trazado de un número negativo es menos el logaritmo del valor absoluto del número. Los valores cercanos a 0 se trazan en una escala lineal.

En el siguiente ejemplo, se muestran números de Fibonacci positivos y negativos trazados en escala logarítmica duplicada y en escala lineal.

[Line.x.box. 9. 1. Chart, 4. 1. Chart, 4. 1.g. 1.g. 9. 9. 1. 9. 5. 1.1 g g

Formatos de número

Puedes controlar el formato de los números de las etiquetas con hAxis.format y vAxis.format. Por ejemplo, {hAxis: { format:'#,###%'} } muestra los valores “1,000%”, “750%” y “50%” para los valores 10, 7.5 y 0.5. También puedes proporcionar cualquiera de los siguientes ajustes predeterminados:

  • {format: 'none'}: Muestra los números sin formato (p.ej., 8,000,000)
  • {format: 'decimal'}: Muestra números con separadores de miles (p.ej., 8 000 000)
  • {format: 'scientific'}: muestra números en notación científica (p.ej., 8e6)
  • {format: 'currency'}: Muestra los números en la moneda local (p.ej., USD 8,000,000.00)
  • {format: 'percent'}: Muestra los números como porcentajes (p.ej., 800,000,000%)
  • {format: 'short'}: Muestra números abreviados (p.ej., 8 millones)
  • {format: 'long'}: Muestra los números como palabras completas (p.ej., 8 millones)

En el gráfico que aparece a continuación, puedes seleccionar entre los ajustes predeterminados:

A continuación, se muestra una página web completa para el gráfico anterior.

 

<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 renderizará 8,000,000 como “8 millones”), puedes localizar las cadenas a otros idiomas especificando un código de idioma cuando cargues la biblioteca de Google Charts. Por ejemplo, para cambiar "8 millones" al "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>