Gráficos de barras

Visão geral

Os gráficos de barras do Google são renderizados no navegador usando SVG ou VML, o que for apropriado para o navegador do usuário. Como todos os gráficos do Google, os gráficos de barras mostram dicas quando o usuário passa o cursor sobre os dados. Para uma versão vertical, consulte o gráfico de colunas.

Exemplos

Barras de coloração

Vamos mapear as densidades de quatro metais preciosos:

Acima, todas as cores são o azul padrão. Isso ocorre porque todos fazem parte da mesma série. Se houvesse uma segunda série, ela estaria em vermelho. Podemos personalizar essas cores com a função de estilo:

Há três maneiras diferentes de escolher as cores, e nossa tabela de dados mostra todas elas: valores RGB, nomes de cores em inglês e uma declaração semelhante a CSS:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

Estilos de barra

O papel de estilo permite controlar vários aspectos da aparência da barra com declarações semelhantes a CSS:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

Não recomendamos misturar estilos muito livremente em um gráfico. Escolha um estilo e mantenha-o. Mas, para demonstrar todos os atributos de estilo, confira um exemplo:

As duas primeiras barras usam um color específico (a primeira com um nome em inglês e a segunda com um valor RGB). Nenhum opacity foi escolhido, portanto, o padrão de 1.0 (totalmente opaco) é usado. É por isso que a segunda barra oculta a linha de grade atrás dela. Na terceira barra, um opacity de 0,2 é usado, revelando a linha de grade. Na quarta barra, três atributos de estilo são usados: stroke-color e stroke-width para desenhar a borda, e fill-color para especificar a cor do retângulo dentro. A barra mais à direita também usa stroke-opacity e fill-opacity para escolher opacidades para a borda e o preenchimento:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Como rotular barras

Os gráficos têm vários tipos de rótulos, como de marcação, de legenda e rótulos nas dicas. Nesta seção, veremos como colocar rótulos dentro (ou perto) das barras em um gráfico de barras.

Digamos que queiramos anotar cada barra com o símbolo químico apropriado. Podemos fazer isso com o papel annotation:

Em nossa tabela de dados, definimos uma nova coluna com { role: 'annotation' } para conter os rótulos das barras:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Embora os usuários possam passar o cursor sobre as barras para ver os valores de dados, convém incluí-los nas próprias barras:

Isso é um pouco mais complicado do que deveria ser, porque criamos um DataView para especificar a anotação de cada barra.

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

Para formatar o valor de maneira diferente, poderíamos definir um formatador e envolvê-lo em uma função como esta: 

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

Em seguida, podemos chamar com calc: getValueAt.bind(undefined, 1).

Se o rótulo for muito grande para caber dentro da barra, ele será exibido fora:

Gráficos de barras empilhadas

Um gráfico de barras empilhadas é sobreposto pelos valores relacionados. Se houver valores negativos, eles serão empilhados na ordem inversa, abaixo da linha de base do eixo do gráfico. Os gráficos de barras empilhadas normalmente são usados quando uma categoria se divide naturalmente em componentes. Por exemplo, considere algumas vendas de livros hipotéticas, divididas por gênero e comparadas ao longo do tempo:

Para criar um gráfico de barras empilhadas, defina a opção isStacked como true:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

Os gráficos de barras empilhadas também são compatíveis com 100% de empilhamento. Nesse caso, as pilhas de elementos em cada valor de domínio são redimensionadas de modo a somar 100%. As opções para isso são isStacked: 'percent', que formata cada valor como uma porcentagem de 100%, e isStacked: 'relative', que formata cada valor como uma fração de 1. Há também uma opção isStacked: 'absolute', que é funcionalmente equivalente a isStacked: true.

No gráfico 100% empilhado à direita, os valores das escalas são baseados na escala relativa de 0 a 1 como frações de 1, mas os valores do eixo são exibidos como porcentagens. Isso ocorre porque as marcações do eixo percentual são o resultado da aplicação de um formato de "#.##%" aos valores relativos da escala de 0 a 1. Ao usar isStacked: 'percent', especifique todas as marcações usando a escala relativa de 0 a 1.

Empilhado
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
100% empilhado
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

Como criar gráficos de barras do Material Design

Em 2014, o Google anunciou diretrizes destinadas a oferecer suporte a uma aparência comum em propriedades e apps (como apps Android) executados nas plataformas do Google. Esse esforço é chamado de Material Design. Forneceremos versões em "Material" de todos os nossos gráficos principais. Fique à vontade para usá-las se gostar da aparência.

A criação de um gráfico de barras do Material Design é semelhante à criação do que agora chamamos de gráfico de barras "clássico". Carregue a API de visualização do Google (embora com o pacote 'bar' em vez do pacote 'corechart'), defina sua tabela de dados e crie um objeto (mas da classe google.charts.Bar em vez de google.visualization.BarChart).

Observação:os gráficos do Material Design não funcionam em versões antigas do Internet Explorer. O IE8 e as versões anteriores não oferecem suporte a SVG, exigido pelos gráficos do Material Design.

Os gráficos de barras do Material Design têm muitas pequenas melhorias em relação aos gráficos de barras clássicos, incluindo uma paleta de cores aprimorada, cantos arredondados, formatação de rótulos mais clara, espaçamento padrão mais restrito entre séries, linhas de grade e títulos mais suaves (e adição de legendas).

<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(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Os gráficos do Material Design estão na versão Beta. A aparência e a interatividade são em grande parte finais, mas muitas das opções disponíveis nos gráficos clássicos ainda não estão disponíveis neles. Veja uma lista de opções que ainda não são compatíveis neste problema.

Além disso, a forma como as opções são declaradas não está finalizada. Portanto, se você estiver usando qualquer uma das opções clássicas, substitua esta linha para "

"chart.draw(data, options);





chart.draw(data, google.charts.Bar.convertOptions(options));

O uso de google.charts.Bar.convertOptions() permite que você aproveite determinados recursos, como as opções predefinidas de hAxis/vAxis.format.

Gráficos Dual X

Observação:os eixos Dual-X estão disponíveis apenas para gráficos do Material Design (ou seja, aqueles com o pacote bar).

Às vezes, você quer exibir duas séries em um gráfico de barras, com dois eixos X independentes: um eixo superior para uma série e um eixo inferior para outro:

Observe que os dois eixos x são rotulados de maneira diferente ("parsecs" versus "magnitude aparente"), mas cada um deles tem suas próprias escalas e linhas de grade independentes. Se você quiser personalizar esse comportamento, use as opções hAxis.gridlines.

No código abaixo, as opções axes e series juntas especificam a aparência dual X do gráfico. A opção series especifica qual eixo usar para cada um deles ('distance' e 'brightness'; eles não precisam ter nenhuma relação com os nomes das colunas na tabela de dados). A opção axes transforma esse gráfico em um gráfico dual X, posicionando o eixo 'apparent magnitude' na parte superior e o eixo 'parsecs' na parte inferior. 

<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([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // 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" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Gráficos Top-X

Observação:os eixos superiores-X estão disponíveis apenas para gráficos do Material Design (ou seja, aqueles com o pacote bar).

Se você quiser colocar os rótulos e o título do eixo X na parte superior do gráfico, e não na parte inferior, faça isso nos gráficos do Material Design com a opção axes.x:

<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([
          ['Opening Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        chart.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Carregando

O nome do pacote google.charts.load é "corechart". O nome da classe da visualização é google.visualization.BarChart. 

  google.charts.load("current", {packages: ["corechart"]});

  var visualization = new google.visualization.BarChart(container);

Para gráficos de barras do Material Design, o nome do pacote google.charts.load é "bar". O nome da classe da visualização é google.charts.Bar. 

  google.charts.load("current", {packages: ["bar"]});

  var chart = new google.charts.Bar(container);

Formato de dados

Linhas:cada linha na tabela representa um grupo de barras.

Columns:

  Coluna 0 Coluna 1 ... Coluna N
Finalidade: Valores da barra 1 neste grupo ... Barra N valores neste grupo
Tipo de dados: number ... number
Role: domínio dados ... dados
Papéis de coluna opcionais: ...

 

Opções de configuração

Nome
animation.duration

É a duração da animação, em milissegundos. Para ver mais detalhes, consulte a documentação de animação.

Tipo: número
Padrão:0
animation.easing

A função de easing aplicada à animação. As seguintes opções estão disponíveis:

  • 'linear' - velocidade constante.
  • "In" (aceleração) - Inicie devagar e acelere.
  • "out" (abrandamento): inicie rápido e desacelere.
  • "inAndOut" - Acelerar e desacelerar - Inicie devagar, acelere e depois desacelere.
Tipo: string
Padrão: 'linear'
animation.startup

Determina se o gráfico será animado no desenho inicial. Se definido como true, o gráfico começará no valor de referência e será animado para o estado final.

Tipo: booleano
Padrão: "false"
annotations.alwaysOutside

Nos gráficos de barras e colunas, se definidos como true, desenham todas as anotações fora de barras/colunas.

Tipo: booleano
Padrão:false
annotations.datum
Para gráficos compatíveis com anotações, o objeto annotations.datum permite substituir a escolha do Google Charts para anotações fornecidas para elementos de dados individuais, como valores exibidos em cada barra em um gráfico de barras. Você pode controlar a cor com annotations.datum.stem.color, o comprimento da haste com annotations.datum.stem.length e o estilo com annotations.datum.style.
Tipo: objeto
Padrão:a cor é "preto", o comprimento é 12, e o estilo é "ponto".
annotations.domain
Para gráficos compatíveis com anotações, o objeto annotations.domain permite substituir a escolha do Gráficos Google para anotações fornecidas para um domínio (o eixo principal do gráfico, como o eixo X em um gráfico de linhas típico). Você pode controlar a cor com annotations.domain.stem.color, o comprimento da haste com annotations.domain.stem.length e o estilo com annotations.domain.style.
Tipo: objeto
Padrão:a cor é "preto", o comprimento é 5, e o estilo é "ponto".
annotations.boxStyle

Para gráficos compatíveis com anotações, o objeto annotations.boxStyle controla a aparência das caixas ao redor das anotações: 

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

No momento, essa opção está disponível para gráficos de área, barras, colunas, combinação, linhas e dispersão. Ela não é compatível com o gráfico de anotações.

Tipo: objeto
Padrão:nulo
annotations.highContrast
Para gráficos compatíveis com anotações, o booleano annotations.highContrast permite substituir a cor da anotação escolhida pelo Gráficos Google. Por padrão, annotations.highContrast é verdadeiro, o que faz com que os gráficos selecionem uma cor de anotação com bom contraste: cores claras em planos de fundo escuros e escuras em planos de fundo claros. Se você definir annotations.highContrast como falso e não especificar sua própria cor de anotação, o Gráficos Google usará a cor de série padrão para a anotação:
Tipo: booleano
Padrão:true
annotations.stem
Para gráficos com suporte a anotações, o objeto annotations.stem permite substituir a escolha do Google Charts para o estilo de "stem". Você pode controlar a cor com annotations.stem.color e o comprimento da haste com annotations.stem.length. Observe que a opção de comprimento da ramificação não afeta as anotações com estilo 'line': para anotações de datum 'line', o comprimento da derivação é sempre o mesmo que o texto e, para anotações de domínio 'line', ele se estende por todo o gráfico.
Tipo: objeto
Padrão:a cor é "preto". O comprimento é de cinco para anotações de domínio e 12 para anotações de datum.
annotations.style
Para gráficos com suporte a anotações, a opção annotations.style permite substituir a escolha de tipo de anotação do Gráficos Google. Pode ser 'line' ou 'point'.
Tipo: string
Padrão: 'point'
annotations.textStyle
Para gráficos compatíveis com anotações, o objeto annotations.textStyle controla a aparência do texto da anotação: 
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

No momento, essa opção está disponível para gráficos de área, barras, colunas, combinação, linhas e dispersão. Ela não é compatível com o Gráfico de anotações .

Tipo: objeto
Padrão:nulo
axisTitlesPosition

Onde posicionar os títulos dos eixos em comparação com a área do gráfico. Valores compatíveis:

  • in - desenha os títulos dos eixos dentro da área do gráfico.
  • out - desenha os títulos dos eixos fora da área do gráfico.
  • nenhum: omite os títulos dos eixos.
Tipo: string
Padrão: 'out'
backgroundColor

A cor de plano de fundo da área principal do gráfico. Pode ser uma string de cor HTML simples, por exemplo: 'red' ou '#00cc00', ou um objeto com as propriedades a seguir.

Tipo:string ou objeto
Padrão: "branco"
backgroundColor.stroke

A cor da borda do gráfico, como uma string de cor HTML.

Tipo: string
Padrão: "#666"
backgroundColor.strokeWidth

A largura da borda, em pixels.

Tipo: número
Padrão:0
backgroundColor.fill

A cor de preenchimento do gráfico, como uma string de cor HTML.

Tipo: string
Padrão: "branco"
bar.groupWidth
A largura de um grupo de barras, especificada em um destes formatos:
  • Pixels (por exemplo, 50).
  • Porcentagem da largura disponível para cada grupo (por exemplo, "20%"), em que "100%" significa que os grupos não têm espaço entre eles.
Tipo:número ou string
Padrão: a proporção áurea, aproximadamente "61,8%".
barras

Se as barras em um gráfico de barras do Material são verticais ou horizontais. Essa opção não afeta os gráficos de barras ou de colunas clássicos.

Tipo: "horizontal" ou "vertical"
Padrão: "vertical"
chartArea

Um objeto com membros para configurar o posicionamento e o tamanho da área do gráfico (onde o próprio gráfico é desenhado, excluindo eixo e legendas). Dois formatos são compatíveis: um número ou um número seguido por %. Um número simples é um valor em pixels, enquanto um número seguido por % é uma porcentagem. Exemplo: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Tipo: objeto
Padrão:nulo
chartArea.backgroundColor
Cor de fundo da área do gráfico. Quando uma string é usada, ela pode ser hexadecimal (por exemplo, '#fdc') ou o nome de uma cor em inglês. Quando um objeto é usado, as seguintes propriedades podem ser fornecidas:
  • stroke: a cor, fornecida como uma string hexadecimal ou nome da cor em inglês.
  • strokeWidth: se fornecido, desenha uma borda ao redor da área do gráfico com a largura especificada (e com a cor stroke).
Tipo:string ou objeto
Padrão: "branco"
chartArea.left

A distância da borda esquerda a desenhar o gráfico.

Tipo:número ou string
Padrão:automático
chartArea.top

Indica a distância entre a borda superior e o gráfico a partir da borda superior.

Tipo:número ou string
Padrão:automático
chartArea.width

Largura da área do gráfico.

Tipo:número ou string
Padrão:automático
chartArea.height

Altura da área do gráfico.

Tipo:número ou string
Padrão:automático
chart.subtitle

Para gráficos de Material, essa opção especifica o subtítulo. Somente gráficos do Material Design oferecem suporte a legendas.

Tipo: string
Padrão:nulo
chart.title

Para Gráficos de Material, essa opção especifica o título.

Tipo: string
Padrão:nulo
cores

As cores a serem usadas para os elementos do gráfico. Uma matriz de strings, em que cada elemento é uma string de cor HTML, por exemplo: colors:['red','#004411'].

Tipo:matriz de strings
Padrão:cores padrão
dataOpacity

A transparência dos pontos de dados, sendo 1,0 completamente opaco e 0,0 totalmente transparente. Em gráficos de dispersão, histograma, barras e colunas, isso se refere aos dados visíveis: pontos no gráfico de dispersão e retângulos nos outros. Nos gráficos em que a seleção de dados cria um ponto, como os gráficos de linhas e áreas, isso se refere aos círculos que aparecem ao passar o cursor ou quando você é selecionado. O gráfico de combinação exibe os dois comportamentos, e essa opção não afeta os outros gráficos. Para mudar a opacidade de uma linha de tendência, consulte Opacidade da linha de tendência .

Tipo: número
Padrão:1,0
enableInteractivity

Se o gráfico gera eventos com base no usuário ou reage à interação do usuário. Se for falso, o gráfico não vai gerar "select" ou outros eventos baseados em interação (mas vai gerar eventos prontos ou de erro) e não vai mostrar texto de passar o cursor nem mudar de acordo com a entrada do usuário.

Tipo: booleano
Padrão:true
explorer

A opção explorer permite movimentar e aplicar zoom em gráficos do Google. explorer: {} oferece o comportamento padrão do explorador, permitindo que os usuários se movimentem na horizontal e na vertical ao arrastar e aumentem e diminuam o zoom rolando a tela.

Este recurso é experimental e pode mudar em versões futuras.

Observação:o explorador só funciona com eixos contínuos (como números ou datas).

Tipo: objeto
Padrão:nulo
explorer.actions

O explorador do Google Charts é compatível com três ações:

  • dragToPan: arraste para movimentar o gráfico na horizontal e vertical. Para movimentar somente ao longo do eixo horizontal, use explorer: { axis: 'horizontal' }. O mesmo acontece com o eixo vertical.
  • dragToZoom: o comportamento padrão do explorador é aumentar e diminuir o zoom quando o usuário faz a rolagem. Se explorer: { actions: ['dragToZoom', 'rightClickToReset'] } for usado, arrastar em uma área retangular aumentará o zoom nessa área. Recomendamos o uso de rightClickToReset sempre que dragToZoom for usado. Consulte explorer.maxZoomIn, explorer.maxZoomOut e explorer.zoomDelta para personalizações de zoom.
  • rightClickToReset: clicar com o botão direito do mouse no gráfico retorna à movimentação e ao nível de zoom originais.
Tipo:matriz de strings
Padrão: ['dragToPan', 'rightClickToReset']
explorer.axis

Por padrão, os usuários podem movimentar a horizontal e a vertical quando a opção explorer é usada. Caso queira que os usuários se movimentem horizontalmente, use explorer: { axis: 'horizontal' }. Da mesma forma, explorer: { axis: 'vertical' } ativa a movimentação somente vertical.

Tipo: string
Padrão:movimentação horizontal e vertical
explorer.keepInBounds

Por padrão, os usuários podem movimentar a tela, independentemente de onde os dados estejam. Para garantir que os usuários não sejam além do gráfico original, use explorer: { keepInBounds: true }.

Tipo: booleano
Padrão:false
explorer.maxZoomIn

O nível máximo de zoom que o explorador pode aumentar. Por padrão, os usuários poderão aumentar o zoom o suficiente para ver apenas 25% da visualização original. Definir explorer: { maxZoomIn: .5 } permite que os usuários aumentem o zoom apenas o suficiente para ver metade da visualização original.

Tipo: número
Padrão:0,25
explorer.maxZoomOut

O máximo que o explorador pode diminuir o zoom. Por padrão, os usuários podem diminuir o zoom o suficiente para que o gráfico ocupe apenas 1/4 do espaço disponível. Definir explorer: { maxZoomOut: 8 } permite que os usuários diminuam o zoom o suficiente para que o gráfico ocupe apenas 1/8 do espaço disponível.

Tipo: número
Padrão:4
explorer.zoomDelta

Quando os usuários aumentam ou diminuem o zoom, o explorer.zoomDelta determina o nível de zoom. Quanto menor o número, mais suave e mais lento o zoom.

Tipo: número
Padrão:1,5
focusTarget

O tipo de entidade que recebe o foco ao passar o cursor. Também afeta qual entidade é selecionada pelo clique do mouse e qual elemento da tabela de dados está associado aos eventos. Pode ser uma das seguintes opções:

  • "datum" - concentra-se em um único ponto de dados. Correlaciona-se a uma célula na tabela de dados.
  • "categoria" - concentra-se em um agrupamento de todos os pontos de dados ao longo do eixo principal. Corresponde a uma linha na tabela de dados.

Em FocusTarget 'category', a dica de ferramenta mostra todos os valores da categoria. Isso pode ser útil para comparar valores de séries diferentes.

Tipo: string
Padrão: 'datum'
fontSize

O tamanho da fonte padrão, em pixels, de todo o texto no gráfico. É possível modificar isso usando propriedades de elementos específicos do gráfico.

Tipo: número
Padrão:automático
fontName

O tipo de fonte padrão para todo o texto no gráfico. É possível modificar isso usando propriedades de elementos específicos do gráfico.

Tipo: string
Padrão: "Arial"
forceIFrame

Desenha o gráfico dentro de um frame inline. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames.

Tipo: booleano
Padrão:false
hAxes

Especifica propriedades para eixos horizontais individuais, se o gráfico tiver vários eixos horizontais. Cada objeto filho é um objeto hAxis e pode conter todas as propriedades compatíveis com hAxis. Esses valores de propriedade substituem todas as configurações globais da mesma propriedade.

Para especificar um gráfico com vários eixos horizontais, primeiro defina um novo eixo usando series.targetAxisIndex. Depois, configure o eixo usando hAxes. O exemplo a seguir atribui a série 1 ao eixo inferior e especifica um título e estilo de texto personalizados para ela:

series:{1:{targetAxisIndex:1}}, hAxes:{1:{title:'Losses', textStyle:{color: 'red'}}}

Essa propriedade pode ser um objeto ou uma matriz: o objeto é uma coleção de objetos, cada um com um rótulo numérico que especifica o eixo definido. Este é o formato mostrado acima; a matriz é uma matriz de objetos, um por eixo. Por exemplo, a seguinte notação de estilo de matriz é idêntica ao objeto hAxis mostrado acima: 

hAxes: {
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {
      color: 'red'
    }
  } // Axis 1
Tipo: matriz de objeto ou objeto com objetos filhos
Padrão:nulo
hAxis

Um objeto com membros para configurar vários elementos do eixo horizontal. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: 

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Tipo: objeto
Padrão:nulo
hAxis.baseline

A linha de base do eixo horizontal.

Tipo: número
Padrão:automático
hAxis.baselineColor

A cor da linha de base do eixo horizontal. Pode ser qualquer string de cor HTML, por exemplo: 'red' ou '#00cc00'.

Tipo: número
Padrão: "preto"
hAxis.direction

A direção em que os valores ao longo do eixo horizontal crescem. Especifique -1 para inverter a ordem dos valores.

Tipo:1 ou -1
Padrão: 1
hAxis.format

Uma string de formato para os rótulos dos eixos numéricos. Esse é um subconjunto do conjunto de padrões de ICU . Por exemplo, {format:'#,###%'} exibirá os valores "1.000%", "750%" e "50%" para os valores 10, 7,5 e 0,5. Também é possível fornecer qualquer um dos seguintes:

  • {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 os 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)

A formatação real aplicada ao rótulo é derivada da localidade com que a API foi carregada. Para mais detalhes, consulte Como carregar gráficos com uma localidade específica .

No cálculo de valores de marcação e linhas de grade, várias combinações alternativas de todas as opções de linha de grade relevantes serão consideradas, e alternativas serão rejeitadas se os rótulos de marcação formatados forem duplicados ou sobrepostos. Portanto, você pode especificar format:"#" se quiser mostrar apenas valores de marcação inteiros, mas saiba que, se nenhuma alternativa satisfizer essa condição, nenhuma linha de grade ou marcação será mostrada.

Tipo: string
Padrão:automático
hAxis.gridlines

Um objeto com propriedades para configurar as linhas de grade no eixo horizontal. As linhas de grade do eixo horizontal são desenhadas verticalmente. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: 

{color: '#333', minSpacing: 20}
Tipo: objeto
Padrão:nulo
hAxis.gridlines.color

A cor das linhas de grade horizontais dentro da área do gráfico. Especifique uma string de cor HTML válida.

Tipo: string
Padrão: "#CCC"
hAxis.gridlines.count

O número aproximado de linhas de grade horizontais dentro da área do gráfico. Se você especificar um número positivo para gridlines.count, ele será usado para calcular minSpacing entre as linhas de grade. Você pode especificar um valor de 1 para desenhar apenas uma linha de grade ou 0 para não desenhar linhas de grade. Especifique -1, que é o padrão, para calcular automaticamente o número de linhas de grade com base em outras opções.

Tipo: número
Padrão: -1
hAxis.gridlines.units

Modifica o formato padrão para vários aspectos dos tipos de dados de data/hora/hora/hora quando usados com linhas de grade calculadas em gráficos. Permite a formatação para anos, meses, dias, horas, minutos, segundos e milissegundos.

O formato geral é:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Para mais informações, consulte Datas e horas.

Tipo: objeto
Padrão:nulo
hAxis.minorGridlines

Um objeto com membros para configurar as linhas de grade secundárias no eixo horizontal, semelhante à opção hAxis.gridlines.

Tipo: objeto
Padrão:nulo
hAxis.minorGridlines.color

A cor das linhas de grade menores horizontais dentro da área do gráfico. Especifique uma string de cor HTML válida.

Tipo: string
Padrão:uma mistura das cores de linha de grade e de plano de fundo
hAxis.minorGridlines.count

A opção minorGridlines.count foi descontinuada na maioria das vezes, exceto para desativar linhas de grade secundárias definindo a contagem como 0. O número de linhas de grade secundárias agora depende totalmente do intervalo entre as principais linhas de grade (consulte hAxis.gridlines.interval) e o espaço mínimo necessário (consulte hAxis.minorGridlines.minSpacing).

Tipo: número
Padrão:1
hAxis.minorGridlines.units

Substitui o formato padrão de vários aspectos dos tipos de dados date/datetime/timeofday quando usados com smallGridlines calculadas em gráfico. Permite a formatação para anos, meses, dias, horas, minutos, segundos e milissegundos.

O formato geral é:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Para mais informações, consulte Datas e horas.

Tipo: objeto
Padrão:nulo
hAxis.logScale

Propriedade hAxis que torna o eixo horizontal uma escala logarítmica (exige que todos os valores sejam positivos). Defina como verdadeiro para sim.

Tipo: booleano
Padrão:false
hAxis.scaleType

A propriedade hAxis que transforma o eixo horizontal em uma escala logarítmica. Será um dos seguintes valores:

  • nulo: nenhum dimensionamento logarítmico é executado.
  • "log" - dimensionamento logarítmico. Valores negativos e zero não são representados no gráfico. Essa opção é igual à configuração de hAxis: { logscale: true }.
  • "mirrorLog": escala logarítmica em que valores negativos e zero são representados no gráfico. O valor plotado de um número negativo é o negativo do log do valor absoluto. Valores próximos a 0 são representados em uma escala linear.
Tipo: string
Padrão: nulo
hAxis.textStyle

Um objeto que especifica o estilo do texto do eixo horizontal. O objeto tem este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

O color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.textPosition

Posição do texto do eixo horizontal em relação à área do gráfico. Valores aceitos: 'out', 'in', 'none'.

Tipo: string
Padrão: 'out'
hAxis.ticks

Substitui as marcas do eixo X geradas automaticamente pela matriz especificada. Cada elemento da matriz deve ser um valor de marcação válido (como um número, data, data e hora ou timeofday) ou um objeto. Se for um objeto, ele precisará ter uma propriedade v para o valor da marcação e uma propriedade f opcional contendo a string literal a ser exibida como o rótulo.

A viewWindow será expandida automaticamente para incluir as marcações mínima e máxima, a menos que você especifique um viewWindow.min ou viewWindow.max para substituir.

Por exemplo:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Tipo:matriz de elementos
Padrão:automático
hAxis.title

A propriedade hAxis que especifica o título do eixo horizontal.

Tipo: string
Padrão:nulo
hAxis.titleTextStyle

Um objeto que especifica o estilo de texto do título do eixo horizontal. O objeto tem este formato: 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

O color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.maxValue

Move o valor máximo do eixo horizontal para o valor especificado. Ele ocorre para a direita na maioria dos gráficos. Ignorado se for definido como um valor menor que o valor x máximo dos dados. hAxis.viewWindow.max substitui essa propriedade.

Tipo: número
Padrão:automático
hAxis.minValue

Move o valor mínimo do eixo horizontal até o valor especificado. Ele fica para a esquerda na maioria dos gráficos. Ignorado se for definido como um valor maior que o valor x mínimo dos dados. hAxis.viewWindow.min substitui essa propriedade.

Tipo: número
Padrão:automático
hAxis.viewWindowMode

Especifica como dimensionar o eixo horizontal para renderizar os valores dentro da área do gráfico. Aceitamos os seguintes valores de string:

  • "pretty": dimensiona os valores horizontais para que os valores de dados máximo e mínimo sejam renderizados um pouco dentro da esquerda e da direita da área do gráfico. A viewWindow é expandida para a linha de grade principal mais próxima para números ou a linha de grade menor mais próxima para datas e horas.
  • "maximized": dimensiona os valores horizontais para que os valores de dados máximo e mínimo toquem à esquerda e à direita da área do gráfico. Isso fará com que haxis.viewWindow.min e haxis.viewWindow.max sejam ignorados.
  • "explicit": uma opção descontinuada para especificar os valores de escala esquerdo e direito da área do gráfico. Esse recurso foi descontinuado por ser redundante com haxis.viewWindow.min e haxis.viewWindow.max. Os valores de dados fora desses valores serão cortados. Especifique um objeto hAxis.viewWindow descrevendo os valores máximo e mínimo a serem mostrados.
Tipo: string
Padrão:equivalente a "pretty", mas haxis.viewWindow.min e haxis.viewWindow.max têm precedência, se usados.
hAxis.viewWindow

Especifica o intervalo de corte do eixo horizontal.

Tipo: objeto
Padrão:nulo
hAxis.viewWindow.max

O valor máximo de dados horizontais a serem renderizados.

Ignorado quando hAxis.viewWindowMode é "bonito" ou "maximizado".

Tipo: número
Padrão:automático
hAxis.viewWindow.min

O valor mínimo de dados horizontais a serem renderizados.

Ignorado quando hAxis.viewWindowMode é "bonito" ou "maximizado".

Tipo: número
Padrão:automático
height

Altura do gráfico, em pixels.

Tipo: número
Padrão:altura do elemento contêiner
isStacked

Se definido como verdadeiro, empilha os elementos de todas as séries em cada valor de domínio. Observação:nos gráficos de Coluna, Área e SteppedArea, o Google Charts inverte a ordem dos itens de legenda para que eles correspondam melhor ao empilhamento dos elementos da série (por exemplo, a série 0 será o item de legenda na parte de baixo). Isso não se aplica a gráficos de barras.

A opção isStacked também é compatível com 100% de empilhamento, em que as pilhas de elementos em cada valor de domínio são redimensionadas para totalizar 100%.

As opções para isStacked são:

  • false: os elementos não serão empilhados. Essa é a opção padrão.
  • true: empilha elementos de todas as séries em cada valor de domínio.
  • 'percent': empilha elementos de todas as séries em cada valor de domínio e os redimensiona de modo a somar 100%, com o valor de cada elemento calculado como uma porcentagem de 100%.
  • 'relative': empilha elementos de todas as séries em cada valor de domínio e os redefine de modo a somar 1, com o valor de cada elemento calculado como uma fração de 1.
  • 'absolute': funciona da mesma forma que isStacked: true.

Para o empilhamento 100%, o valor calculado de cada elemento vai aparecer na dica após o valor real.

Por padrão, o eixo de destino exibirá valores de marcação com base na escala relativa de 0 a 1 como frações de 1 para 'relative' e de 0 a 100% para 'percent'. Observação:ao usar a opção 'percent', os valores de eixo/marca são exibidos como porcentagens. No entanto, os valores reais são os valores de escala relativos de 0 a 1. Isso ocorre porque as marcações do eixo percentual são o resultado da aplicação de um formato de "#.##%" aos valores de escala relativos de 0 a 1. Ao usar isStacked: 'percent', especifique todas as marcações/linhas de grade usando os valores de escala de 0 a 1 relativos. Você pode personalizar os valores das linhas de grade/marcações e a formatação usando as opções hAxis/vAxis apropriadas.

O empilhamento 100% só oferece suporte a valores de dados do tipo number e precisa ter um valor de referência igual a zero.

Tipo: booleano/string
Padrão:false
lenda

Um objeto com membros para configurar vários aspectos da legenda. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tipo: objeto
Padrão:nulo
legend.pageIndex

Índice de página inicial selecionado da legenda.

Tipo: número
Padrão:0
legend.position

Posição da legenda. Será um dos seguintes valores:

  • "bottom" - abaixo do gráfico.
  • 'esquerdo' - à esquerda do gráfico, desde que o eixo esquerdo não tenha séries associadas. Portanto, se você quiser a legenda à esquerda, use a opção targetAxisIndex: 1.
  • "in" - dentro do gráfico, pelo canto superior esquerdo.
  • "none": nenhuma legenda é exibida.
  • “right” - à direita do gráfico. Incompatível com a opção vAxes.
  • "top" - acima do gráfico.
Tipo: string
Padrão: "right"
legend.alignment

Alinhamento da legenda. Será um dos seguintes valores:

  • "start": alinhado ao início da área alocada para a legenda.
  • "center": centralizado na área alocada para a legenda.
  • "end" - alinhado ao fim da área alocada para a legenda.

Início, centro e fim são relativos ao estilo (vertical ou horizontal) da legenda. Por exemplo, em uma legenda de "direita", "início" e "fim" estão na parte de cima e de baixo, respectivamente. Para uma legenda de "topo", "início" e "fim" estariam à esquerda e à direita da área, respectivamente.

O valor padrão depende da posição da legenda. Para legendas "bottom", o padrão é "center". Outras legendas têm como padrão "start".

Tipo: string
Padrão:automático
legend.textStyle

Um objeto que especifica o estilo do texto da legenda. O objeto tem este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

O color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
reverseCategories

Se definida como verdadeira, desenhará séries de baixo para cima. O padrão é desenhar de cima para baixo.

Tipo: booleano
Padrão:false
orientação

A orientação do gráfico. Quando definida como 'vertical', gira os eixos do gráfico para que, por exemplo, um gráfico de colunas se torne um gráfico de barras e um gráfico de área cresça para a direita em vez de para cima:

Tipo: string
Padrão: "horizontal"
séries

Uma matriz de objetos, cada um descrevendo o formato da série correspondente no gráfico. Para usar valores padrão para uma série, especifique um objeto vazio {}. Se uma série ou um valor não for especificado, o valor global será usado. Cada objeto suporta as seguintes propriedades:

  • annotations: um objeto a ser aplicado às anotações desta série. Isso pode ser usado para controlar, por exemplo, a textStyle da série: 

    series: {
  0: {
    annotations: {
      textStyle: {fontSize: 12, color: 'red' }
    }
  }
}

    Consulte as várias opções de annotations para uma lista mais completa do que pode ser personalizado.

  • color: a cor a ser usada na série. Especifique uma string de cor HTML válida.
  • labelInLegend: a descrição da série que será exibida na legenda do gráfico.
  • targetAxisIndex: a qual eixo atribuir essa série, em que 0 é o eixo padrão e 1 é o eixo oposto. O valor padrão é 0. Defina como 1 para definir um gráfico em que séries diferentes são renderizadas em relação a eixos diferentes. Pelo menos uma série deve ser alocada ao eixo padrão. Você pode definir uma escala diferente para eixos diferentes.
  • visibleInLegend: um valor booleano, em que "true" significa que a série precisa ter uma entrada de legenda, e "false" significa que ela não precisa. O padrão é verdadeiro.

É possível especificar uma matriz de objetos, cada um aplicável à série na ordem determinada, ou especificar um objeto em que cada filho tenha uma chave numérica que indica a qual série ele se aplica. Por exemplo, as duas declarações a seguir são idênticas e declaram a primeira série como preta e ausente da legenda, e a quarta como vermelha e ausente da legenda: 

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
Tipo:matriz de objetos ou objeto com objetos aninhados
Padrão: {}
tema

Um tema é um conjunto de valores de opções predefinidos que trabalham juntos para atingir um comportamento ou efeito visual específico de gráfico. No momento, apenas um tema está disponível:

  • "maximized": maximiza a área do gráfico e desenha a legenda e todos os rótulos dentro da área do gráfico. Define as seguintes opções: 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
Tipo: string
Padrão:nulo
título

Texto a ser exibido acima do gráfico.

Tipo: string
Padrão:sem título
titlePosition

Onde colocar o título do gráfico em comparação com a área do gráfico. Valores compatíveis:

  • in - desenha o título dentro da área do gráfico.
  • out - desenha o título fora da área do gráfico.
  • nenhum: omite o título.
Tipo: string
Padrão: 'out'
titleTextStyle

Um objeto que especifica o estilo do texto do título. O objeto tem este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

O color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
dica

Um objeto com membros para configurar vários elementos de dica. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo: objeto
Padrão:nulo
tooltip.ignoreBounds

Se definido como true, permite que o desenho de dicas flua fora dos limites do gráfico em todos os lados.

Observação:isso se aplica apenas a dicas de HTML. Se essa opção for ativada com dicas de SVG, qualquer estouro fora dos limites do gráfico será cortado. Consulte Como personalizar o conteúdo da dica para mais detalhes.

Tipo: booleano
Padrão:false
tooltip.isHtml

Se definida como verdadeira, use dicas renderizadas em HTML (em vez de renderizadas em SVG). Consulte Como personalizar o conteúdo da dica para mais detalhes.

Observação:a personalização do conteúdo da dica HTML pelo papel de dados da coluna de dicas não é compatível com a visualização do gráfico de bolhas.

Tipo: booleano
Padrão:false
tooltip.showColorCode

Se verdadeiro, mostra quadrados coloridos ao lado das informações da série na dica. O padrão é verdadeiro quando focusTarget é definido como "categoria". Caso contrário, o padrão é "falso".

Tipo: booleano
Padrão:automático
tooltip.textStyle

Um objeto que especifica o estilo do texto da dica. O objeto tem este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

O color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

A interação do usuário que faz com que a dica seja exibida:

  • "focus": a dica é mostrada quando o usuário passa o cursor sobre o elemento.
  • "nenhum" - a dica de ferramenta não será exibida.
  • "selection": a dica de ferramenta será mostrada quando o usuário selecionar o elemento.
Tipo: string
Padrão: "focus"
linhas de tendência

Exibe linhas de tendência nos gráficos compatíveis com elas. Por padrão, linhas de tendência lineares são usadas, mas isso pode ser personalizado com a opção trendlines.n.type.

As linhas de tendência são especificadas por série. Portanto, na maioria das vezes, as opções ficarão assim: 

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
Tipo: objeto
Padrão:nulo
trendlines.n.color

A cor da linha de tendência , expressa como um nome de cor em inglês ou uma string hexadecimal.

Tipo: string
Padrão:cor padrão da série
trendlines.n.degree

Para linhas de tendência de type: 'polynomial', o grau do polinômio (2 para quadráticos, 3 para cúbico e assim por diante). O grau padrão pode mudar de 3 para 2 em uma próxima versão do Google Charts.

Tipo: número
Padrão:3
trendlines.n.labelInLegend

Se definida, a linha de tendência vai aparecer na legenda como esta string.

Tipo: string
Padrão:nulo
trendlines.n.lineWidth

A largura da linha de tendência , em pixels.

Tipo: número
Padrão:2
trendlines.n.opacity

A transparência da linha de tendência , de 0.0 (transparente) a 1.0 (opaco).

Tipo: número
Padrão:1,0
trendlines.n.pointSize

As linhas de tendência são geradas pela inclusão de vários pontos no gráfico. Essa opção raramente necessária permite personalizar o tamanho dos pontos. A opção lineWidth da linha de tendência geralmente é preferível. No entanto, você vai precisar dessa opção se estiver usando a opção global pointSize e quiser um tamanho de ponto diferente para suas linhas de tendência.

Tipo: número
Padrão: 1
trendlines.n.pointsVisible

As linhas de tendência são geradas pela inclusão de vários pontos no gráfico. A opção pointsVisible da linha de tendência determina se os pontos de uma linha de tendência específica são visíveis.

Tipo: booleano
Padrão:true
trendlines.n.showR2

Indica se o coeficiente de determinação será mostrado na legenda ou na dica da linha de tendência.

Tipo: booleano
Padrão:false
trendlines.n.type

Se as linhas de tendência são 'linear' (padrão), 'exponential' ou 'polynomial'.

Tipo: string
Padrão:linear
trendlines.n.visibleInLegend

Se a equação da linha de tendência aparece na legenda. Ela vai aparecer na dica da linha de tendência.

Tipo: booleano
Padrão:false
vAxis

Um objeto com membros para configurar vários elementos do eixo vertical. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: 

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Tipo: objeto
Padrão:nulo
vAxis.baseline

Propriedade vAxis que especifica a linha de base do eixo vertical. Se a linha de base for maior que a linha de grade mais alta ou menor que a linha de grade mais baixa, ela será arredondada para a linha de grade mais próxima.

Essa opção só é compatível com um eixo continuous.

Tipo: número
Padrão:automático
vAxis.baselineColor

Especifica a cor da linha de base para o eixo vertical. Pode ser qualquer string de cor HTML, por exemplo: 'red' ou '#00cc00'.

Essa opção só é compatível com um eixo continuous.

Tipo: número
Padrão: "preto"
vAxis.direction

A direção em que os valores ao longo do eixo vertical crescem. Por padrão, os valores baixos ficam na parte inferior do gráfico. Especifique -1 para inverter a ordem dos valores.

Tipo:1 ou -1
Padrão: 1
vAxis.format

Uma string de formato para rótulos numéricos ou de data do eixo.

Para rótulos de eixo numérico, esse é um subconjunto do conjunto de padrões de ICU de formatação decimal. Por exemplo, {format:'#,###%'} exibirá 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 opçõ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 os 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)

Para rótulos de eixo de data, esse é um subconjunto do conjunto de padrões de ICU de formatação de datas. Por exemplo, {format:'MMM d, y'} exibirá o valor "1o de julho de 2011" para a primeira data de julho de 2011.

A formatação real aplicada ao rótulo é derivada da localidade com que a API foi carregada. Para mais detalhes, consulte Como carregar gráficos com uma localidade específica .

No cálculo de valores de marcação e linhas de grade, várias combinações alternativas de todas as opções de linha de grade relevantes serão consideradas, e alternativas serão rejeitadas se os rótulos de marcação formatados forem duplicados ou sobrepostos. Portanto, você pode especificar format:"#" se quiser mostrar apenas valores de marcação inteiros, mas saiba que, se nenhuma alternativa satisfizer essa condição, nenhuma linha de grade ou marcação será mostrada.

Essa opção só é compatível com um eixo continuous.

Tipo: string
Padrão:automático
vAxis.gridlines

Um objeto com membros para configurar as linhas de grade no eixo vertical. As linhas de grade do eixo vertical são desenhadas horizontalmente. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: 

{color: '#333', minSpacing: 20}

Essa opção só é compatível com um eixo continuous.

Tipo: objeto
Padrão:nulo
vAxis.gridlines.color

A cor das linhas de grade verticais dentro da área do gráfico. Especifique uma string de cor HTML válida.

Tipo: string
Padrão: "#CCC"
vAxis.gridlines.count

O número aproximado de linhas de grade horizontais dentro da área do gráfico. Se você especificar um número positivo para gridlines.count, ele será usado para calcular minSpacing entre as linhas de grade. Você pode especificar um valor de 1 para desenhar apenas uma linha de grade ou 0 para não desenhar linhas de grade. Especifique -1, que é o padrão, para calcular automaticamente o número de linhas de grade com base em outras opções.

Tipo: número
Padrão: -1
vAxis.gridlines.units

Modifica o formato padrão para vários aspectos dos tipos de dados de data/hora/hora/hora quando usados com linhas de grade calculadas em gráficos. Permite a formatação para anos, meses, dias, horas, minutos, segundos e milissegundos.

O formato geral é:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

Para mais informações, consulte Datas e horas.

Tipo: objeto
Padrão:nulo
vAxis.minorGridlines

Um objeto com membros para configurar as linhas de grade secundárias no eixo vertical, semelhante à opção vAxis.gridlines.

Essa opção só é compatível com um eixo continuous.

Tipo: objeto
Padrão:nulo
vAxis.minorGridlines.color

A cor das linhas de grade verticais menores dentro da área do gráfico. Especifique uma string de cor HTML válida.

Tipo: string
Padrão:uma mistura das cores de linha de grade e de plano de fundo
vAxis.minorGridlines.count

A opção menosGridlines.count está obsoleta, exceto para desativar linhas de grade secundárias ao definir a contagem como 0. O número de linhas de grade secundárias depende do intervalo entre as principais linhas de grade (consulte vAxis.gridlines.interval) e o espaço mínimo necessário (consulte vAxis.minorGridlines.minSpacing).

Tipo: número
Padrão: 1
vAxis.minorGridlines.units

Substitui o formato padrão de vários aspectos dos tipos de dados date/datetime/timeofday quando usados com smallGridlines calculadas em gráfico. Permite a formatação para anos, meses, dias, horas, minutos, segundos e milissegundos.

O formato geral é:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Para mais informações, consulte Datas e horas.

Tipo: objeto
Padrão:nulo
vAxis.logScale

Se verdadeiro, transforma o eixo vertical em uma escala logarítmica. Observação: todos os valores precisam ser positivos.

Essa opção só é compatível com um eixo continuous.

Tipo: booleano
Padrão:false
vAxis.scaleType

A propriedade vAxis que transforma o eixo vertical em uma escala logarítmica. Será um dos seguintes valores:

  • nulo: nenhum dimensionamento logarítmico é executado.
  • "log" - dimensionamento logarítmico. Valores negativos e zero não são representados no gráfico. Essa opção é igual à configuração de vAxis: { logscale: true }.
  • "mirrorLog": escala logarítmica em que valores negativos e zero são representados no gráfico. O valor plotado de um número negativo é o negativo do log do valor absoluto. Valores próximos a 0 são representados em uma escala linear.
Tipo: string
Padrão:nulo
vAxis.textPosition

Posição do texto do eixo vertical em relação à área do gráfico. Valores aceitos: 'out', 'in', 'none'.

Tipo: string
Padrão: 'out'
vAxis.textStyle

Um objeto que especifica o estilo do texto do eixo vertical. O objeto tem este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

O color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

Substitui as marcas do eixo Y geradas automaticamente pela matriz especificada. Cada elemento da matriz deve ser um valor de marcação válido (como um número, data, data e hora ou timeofday) ou um objeto. Se for um objeto, ele precisará ter uma propriedade v para o valor da marcação e uma propriedade f opcional contendo a string literal a ser exibida como o rótulo.

A viewWindow será expandida automaticamente para incluir as marcações mínima e máxima, a menos que você especifique um viewWindow.min ou viewWindow.max para substituir.

Por exemplo:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

Essa opção só é compatível com um eixo continuous.

Tipo:matriz de elementos
Padrão:automático
vAxis.title

Propriedade vAxis que especifica um título para o eixo vertical.

Tipo: string
Padrão:sem título
vAxis.titleTextStyle

Um objeto que especifica o estilo de texto do título do eixo vertical. O objeto tem este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

O color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

Move o valor máximo do eixo vertical até o valor especificado. Na maioria dos gráficos, esse valor é crescente. Ignorado se estiver definido como um valor menor que o valor y máximo dos dados. vAxis.viewWindow.max substitui essa propriedade.

Essa opção só é compatível com um eixo continuous.

Tipo: número
Padrão:automático
vAxis.minValue

Move o valor mínimo do eixo vertical até o valor especificado. Na maioria dos gráficos, esse valor é baixo. Ignorado se estiver definido como um valor maior que o valor y mínimo dos dados. vAxis.viewWindow.min substitui essa propriedade.

Essa opção só é compatível com um eixo continuous.

Tipo: número
Padrão:nulo
vAxis.viewWindowMode

Especifica como dimensionar o eixo vertical para renderizar os valores dentro da área do gráfico. Aceitamos os seguintes valores de string:

  • "pretty" - dimensiona os valores verticais para que os valores de dados máximo e mínimo sejam renderizados um pouco dentro da parte inferior e superior da área do gráfico. A viewWindow é expandida para a linha de grade principal mais próxima para números ou a linha de grade menor mais próxima para datas e horas.
  • "maximized": dimensiona os valores verticais de modo que os valores máximo e mínimo dos dados toquem nas partes superior e inferior da área do gráfico. Isso fará com que vaxis.viewWindow.min e vaxis.viewWindow.max sejam ignorados.
  • "explicit": uma opção descontinuada para especificar os valores de escala superior e inferior da área do gráfico. (descontinuado porque é redundante com vaxis.viewWindow.min e vaxis.viewWindow.max. Os valores de dados fora deles serão cortados. É necessário especificar um objeto vAxis.viewWindow descrevendo os valores máximo e mínimo a serem mostrados.

Essa opção só é compatível com um eixo continuous.

Tipo: string
Padrão:equivalente a "pretty", mas vaxis.viewWindow.min e vaxis.viewWindow.max têm precedência, se usados.
vAxis.viewWindow

Especifica o intervalo de corte do eixo vertical.

Tipo: objeto
Padrão:nulo
vAxis.viewWindow.max

  • Para um eixo continuous:

    O valor máximo dos dados verticais a serem renderizados.

  • Para um eixo discrete:

    O índice de linha baseado em zero em que a janela de corte termina. Os pontos de dados neste índice e em valores superiores serão cortados. Em conjunto com vAxis.viewWindowMode.min, ele define um intervalo meio aberto [min, max) que indica os índices de elementos a serem exibidos. Em outras palavras, todos os índices de forma que min <= index < max sejam exibidos.

Ignorado quando vAxis.viewWindowMode é "bonito" ou "maximizado".

Tipo: número
Padrão:automático
vAxis.viewWindow.min

  • Para um eixo continuous:

    O valor mínimo de dados verticais a ser renderizado.

  • Para um eixo discrete:

    O índice de linha baseado em zero em que a janela de corte começa. Os pontos de dados em índices inferiores a esse serão cortados. Em conjunto com vAxis.viewWindowMode.max, ele define um intervalo meio aberto [min, max) que indica os índices de elementos a serem exibidos. Em outras palavras, todos os índices de forma que min <= index < max sejam exibidos. Ignorado quando vAxis.viewWindowMode é "bonito" ou "maximizado".

Ignorado quando vAxis.viewWindowMode é "bonito" ou "maximizado".

Tipo: número
Padrão:automático
width

Largura do gráfico, em pixels.

Tipo: número
Padrão:largura do elemento que o contém

Métodos

Método
draw(data, options)

Desenha o gráfico. O gráfico aceita outras chamadas de método somente depois que o evento ready é disparado. Extended description.

Return Type: nenhum
getAction(actionID)

Retorna o objeto de ação da dica com o actionID solicitado.

Tipo de retorno: objeto
getBoundingBox(id)

Retorna um objeto que contém as informações de esquerda, parte superior, largura e altura do elemento id do gráfico. O formato de id ainda não está documentado (eles são os valores de retorno dos manipuladores de eventos), mas estes são alguns exemplos:

var cli = chart.getChartLayoutInterface();

Altura da área do gráfico
cli.getBoundingBox('chartarea').height
Largura da terceira barra na primeira série de um gráfico de barras ou colunas
cli.getBoundingBox('bar#0#2').width
Caixa delimitadora do quinto encaixe de um gráfico de pizza
cli.getBoundingBox('slice#4')
Caixa delimitadora dos dados de um gráfico vertical (por exemplo, coluna):
cli.getBoundingBox('vAxis#0#gridline')
Caixa delimitadora dos dados de um gráfico horizontal (por exemplo, de barras):
cli.getBoundingBox('hAxis#0#gridline')

Os valores são relativos ao contêiner do gráfico. Chame essa função depois que o gráfico for desenhado.

Tipo de retorno: objeto
getChartAreaBoundingBox()

Retorna um objeto que contém as informações de esquerda, parte superior, largura e altura do conteúdo do gráfico (ou seja, excluindo rótulos e legendas):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

Os valores são relativos ao contêiner do gráfico. Chame essa função depois que o gráfico for desenhado.

Tipo de retorno: objeto
getChartLayoutInterface()

Retorna um objeto que contém informações sobre o posicionamento na tela do gráfico e seus elementos.

Os seguintes métodos podem ser chamados no objeto retornado:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Chame essa função depois que o gráfico for desenhado.

Tipo de retorno: objeto
getHAxisValue(xPosition, optional_axis_index)

Retorna o valor de dados horizontal em xPosition, que é um deslocamento de pixel da borda esquerda do contêiner do gráfico. Pode ser negativo.

Exemplo: chart.getChartLayoutInterface().getHAxisValue(400).

Chame essa função depois que o gráfico for desenhado.

Tipo de devolução: número
getImageURI()

Retorna o gráfico serializado como um URI de imagem.

Chame essa função depois que o gráfico for desenhado.

Consulte Como imprimir gráficos PNG.

Tipo de retorno: string
getSelection()

Retorna uma matriz das entidades de gráfico selecionadas. As entidades selecionáveis são barras, entradas de legenda e categorias. Neste gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

Tipo de retorno:matriz de elementos de seleção
getVAxisValue(yPosition, optional_axis_index)

Retorna o valor de dados vertical em yPosition, que é um deslocamento de pixel para baixo em relação à borda superior do contêiner do gráfico. Pode ser negativo.

Exemplo: chart.getChartLayoutInterface().getVAxisValue(300).

Chame essa função depois que o gráfico for desenhado.

Tipo de devolução: número
getXLocation(dataValue, optional_axis_index)

Retorna a coordenada x do pixel de dataValue em relação à borda esquerda do contêiner do gráfico.

Exemplo: chart.getChartLayoutInterface().getXLocation(400).

Chame essa função depois que o gráfico for desenhado.

Tipo de devolução: número
getYLocation(dataValue, optional_axis_index)

Retorna a coordenada y do pixel de dataValue em relação à borda superior do contêiner do gráfico.

Exemplo: chart.getChartLayoutInterface().getYLocation(300).

Chame essa função depois que o gráfico for desenhado.

Tipo de devolução: número
removeAction(actionID)

Remove a ação da dica com o actionID solicitado do gráfico.

Tipo de devolução: none
setAction(action)

Define uma ação de dica a ser executada quando o usuário clica no texto de ação.

O método setAction usa um objeto como parâmetro de ação. Esse objeto precisa especificar três propriedades: id, o ID da ação definida, text, o texto que aparecerá na dica da ação, e action, a função que será executada quando um usuário clicar no texto da ação.

Todas as ações de dica precisam ser definidas antes de chamar o método draw() do gráfico. Descrição estendida.

Tipo de devolução: none
setSelection()

Seleciona as entidades de gráfico especificadas. Cancela qualquer seleção anterior. As entidades selecionáveis são barras, entradas de legenda e categorias. Neste gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

Return Type: nenhum
clearChart()

Limpa o gráfico e libera todos os recursos alocados.

Return Type: nenhum

Eventos

Para mais informações sobre como usar esses eventos, consulte Interatividade básica, Como lidar com eventos e Como disparar eventos.

Nome
animationfinish

Disparado quando a animação de transição é concluída.

Properties:nenhuma
click

Disparado quando o usuário clica dentro do gráfico. Pode ser usado para identificar quando o título, os elementos de dados, as entradas de legenda, os eixos, as linhas de grade ou os rótulos são clicados.

Propriedades:targetID
error

Disparado quando ocorre um erro ao tentar renderizar o gráfico.

Properties:ID, message
legendpagination

Disparado quando o usuário clica nas setas de paginação de legendas. Transmite o índice de página baseado em zero atual e o número total de páginas.

Propriedades:currentPageIndex, totalPages
onmouseover

Disparado quando o usuário passa o mouse sobre uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Uma barra se correlaciona com uma célula na tabela de dados, uma entrada de legenda para uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo).

Propriedades: linha, coluna
onmouseout

Disparado quando o usuário afasta o mouse de uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Uma barra se correlaciona com uma célula na tabela de dados, uma entrada de legenda para uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo).

Propriedades: linha, coluna
ready

O gráfico está pronto para chamadas de métodos externos. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método draw e chame-o somente depois que o evento for disparado.

Properties:nenhuma
select

Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame getSelection().

Properties:nenhuma

Política de dados

Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.