Como personalizar eixos

  1. Visão geral
  2. Terminologia
  3. Discreto vs. contínuo
  4. Escala do eixo
  5. Formatos de número

Visão geral

Em geral, as dimensões nos dados são exibidas em eixos, horizontais e verticais. Esse é o caso para: Gráfico de área, Gráfico de barras, Gráfico de vela, Gráfico de colunas, Gráfico de combinação, Gráfico de linhas, Gráfico de área em degraus e Gráfico de dispersão.

Ao criar um gráfico com eixos, é possível personalizar algumas propriedades:

  • Discreto vs. contínuo
  • Direção: você pode personalizar a direção usando a opção hAxis/vAxis.direction.
  • Posicionamento e estilo do rótulo - Você pode personalizar o posicionamento e o estilo do rótulo usando as opções hAxis/vAxis.textPosition e hAxis/vAxis.textStyle.
  • Texto e estilo do título do eixo: é possível personalizar o texto e o estilo do título do eixo usando as opções hAxis/vAxis.title e hAxis/vAxis.titleTextStyle.
  • Escala de eixo: é possível definir a escala de um eixo para a escala logarítmica (registro) usando as opções hAxis/vAxis.logScale ou hAxis/vAxis.scaleType.
  • Para ver uma lista completa de opções de configuração de eixos, consulte as opções hAxis e vAxis na documentação do seu gráfico específico.

Terminologia

Eixo principal/menor:

  • O principal é o eixo ao longo da orientação natural do gráfico. Para gráficos de linhas, área, colunas, combinação, área em degraus e velas, este é o eixo horizontal. Em um gráfico de barras, é o vertical. Os gráficos de dispersão e de pizza não têm um eixo principal.
  • O eixo menor é o outro.

Eixo discreto/contínuo:

  • Um eixo discreto tem um número finito de valores espaçados uniformemente, chamados de categorias.
  • Um eixo contínuo tem um número infinito de valores possíveis.

Discreto e contínuo

O eixo principal de um gráfico pode ser discreto ou contínuo. Ao usar um eixo discreto, os pontos de dados de cada série são espaçados uniformemente dentro do eixo, de acordo com o índice da linha. Ao usar um eixo contínuo, os pontos de dados são posicionados de acordo com o valor do domínio.

A rotulação também é diferente. Em um eixo discreto, os nomes das categorias (especificados na coluna de domínio dos dados) são usados como rótulos. Em um eixo contínuo, os rótulos são gerados automaticamente: o gráfico mostra linhas de grade com espaçamento uniforme, em que cada linha é rotulada de acordo com o valor que representa.

Os eixos a seguir são sempre contínuos:

  • Ambos os eixos dos gráficos de bolhas.
  • É o menor eixo.

Nos gráficos de linhas, área, barras, colunas e velas (e gráficos de combinação que contêm somente essa série), você pode controlar o tipo do eixo maior:

  • Para um eixo separado, defina o tipo de coluna de dados como string.
  • Para um eixo contínuo, defina o tipo da coluna de dados como number, date, datetime ou timeofday.
Discreto / contínuo Tipo da primeira coluna Exemplo
Discreto string
Contínuo number
Contínuo date

Escala do eixo

É possível definir a escala de um eixo usando a opção scaleType. Por exemplo, para definir a escala do eixo vertical como escala de registro, use a seguinte opção:

  vAxis: {
        scaleType: 'log'
  }

O gráfico de linhas a seguir mostra o crescimento da população mundial em escala linear e padrão.

Formatos de número

Você pode controlar a formatação dos números de rótulo com hAxis.format e vAxis.format. Por exemplo, {hAxis: { format:'#,###%'} } exibe os valores "1.000%", "750%" e "50%" para os valores 10, 7,5 e 0,5. Também é possível fornecer qualquer uma das seguintes predefinições:

  • {format: 'none'}: exibe números sem formatação (por exemplo, 8000000)
  • {format: 'decimal'}: exibe números com separadores de milhares (por exemplo, 8.000.000)
  • {format: 'scientific'}: exibe números em notação científica (por exemplo, 8e6)
  • {format: 'currency'}: exibe números na moeda local (por exemplo, US$ 8.000.000)
  • {format: 'percent'}: exibe números como porcentagens (por exemplo, 800.000.000%)
  • {format: 'short'}: exibe números abreviados (por exemplo, 8 mi)
  • {format: 'long'}: exibe números como palavras completas (por exemplo, 8 milhões)

No gráfico abaixo, é possível selecionar entre as predefinições:

Veja a seguir uma página da Web completa para o gráfico acima.

<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>

Ao usar um formato que emprega texto (por exemplo, o long, que renderiza 8.000.000 como "8 milhões"), é possível localizar as strings em outros idiomas especificando um código de idioma ao carregar a biblioteca dos gráficos do Google. Por exemplo, para mudar "8 milhões" para o "8 миллиона", russo, chame a biblioteca assim:

<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>