Esta página foi traduzida pela API Cloud Translation.

Personalizar eixos

Visão geral
Terminologia
Discreto vs. contínuo
Escala do eixo
Formatos de número

Visão geral

As dimensões dos dados são frequentemente exibidas em eixos, horizontais e verticais. Esse é o caso de: Gráfico de área, Gráfico de barras, Gráfico candlestick, Gráfico de colunas, Gráfico de combinação, Gráfico de linhas, Gráfico de áreas em degraus e Gráfico de dispersão.

Ao criar um gráfico com eixos, você pode 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 dos rótulos usando as opções hAxis/vAxis.textPosition e hAxis/vAxis.textStyle.
Estilo e texto do título do eixo: você pode personalizar o texto e o estilo do título do eixo usando as opções hAxis/vAxis.title e hAxis/vAxis.titleTextStyle.
Escala do eixo: você pode definir a escala de um eixo como logarítmica (log) usando as opções hAxis/vAxis.logScale ou hAxis/vAxis.scaleType.
Para obter uma lista completa de opções de configuração de eixo, consulte as opções de eixo e vAxis na documentação de seu gráfico específico.

Terminologia

Eixo maior/menor:

O eixo maior é o eixo ao longo da orientação natural do gráfico. Para gráficos de linhas, áreas, colunas, combinações, áreas em degraus e velas, este é o eixo horizontal. Em um gráfico de barras, é vertical. Os gráficos de dispersão e pizza não têm um eixo maior.
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.

Distinto vs. 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 ao longo do eixo, de acordo com o índice de linha. Ao usar um eixo contínuo, os pontos de dados são posicionados de acordo com o valor do domínio.

A rotulagem 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 espaçadas uniformemente, 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 apenas essas séries), você pode controlar o tipo do eixo principal:

Para um eixo discreto, 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 de primeira coluna	Exemplo
Distinto	string
Contínua	number
Contínua	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 para a escala logarítmica, 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 (padrão) e logarítmica.

Se os dados contiverem valores zero ou negativos, será possível plotar os pontos usando a opção scaleType: 'mirrorLog'. Na escala de registro espelhado, o valor traçado de um número negativo é menos o registro do valor absoluto do número. Valores próximos de 0 são plotados em uma escala linear.

O exemplo a seguir mostra números de Fibonacci positivos e negativos plotados na escala de registro espelhada e na escala linear.

Formatos de número

É possível controlar a formatação dos números do 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'}: mostra números sem formatação (por exemplo, 8.000.000)
{format: 'decimal'}: exibe números com separadores de milhares (por exemplo, 8.000.000)
{format: 'scientific'}: mostra números em notação científica (por exemplo, 8e6)
{format: 'currency'}: exibe números na moeda local (por exemplo, USD 8.000.000,00)
{format: 'percent'}: mostra números como porcentagens (por exemplo, 800.000.000%)
{format: 'short'}: mostra números abreviados (por exemplo, 8 mi)
{format: 'long'}: exibe números como palavras inteiras (por exemplo, 8 milhões)

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

Segue uma página da Web completa para o gráfico acima.

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);
         };
      };

<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 formato long, que renderizará 8.000.000 como "8 milhões"), você pode localizar as strings em outros idiomas especificando um código de idioma ao carregar a biblioteca do Google Charts. Por exemplo, para mudar "8 milhões" para o russo "8 миллиона", chame a biblioteca da seguinte forma:

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