Visão geral
Um gráfico de colunas é um gráfico de barras verticais renderizado no navegador usando SVG ou VML, o que for mais apropriado para o navegador do usuário. Como todos os gráficos do Google, os gráficos de colunas mostram dicas quando o usuário passa o cursor sobre os dados. Para uma versão horizontal desse gráfico, consulte o gráfico de barras.
Exemplos
Como definir cores para colunas
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 coluna
O papel de estilo permite controlar vários aspectos da aparência da coluna 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 e mantenha o estilo). Mas, para demonstrar todos os atributos de estilo, veja um exemplo:
  As duas primeiras colunas usam um color específico (a primeira com um nome em inglês, a segunda com um valor RGB). Nenhum opacity foi escolhido, então o padrão de 1.0 (totalmente opaco) é usado. É por isso que a segunda coluna oculta a linha de grade atrás dela.  Na terceira coluna, é usado um opacity de 0,2, revelando a linha de grade. Na quarta, 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 interno. A coluna 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 colunas
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 colunas em um gráfico de colunas.
Digamos que queremos anotar cada coluna 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 colunas:
       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 colunas para ver os valores de dados, convém incluí-los nas próprias colunas:
  Isso é um pouco mais complicado do que deveria ser, porque
  criamos um DataView para especificar a anotação de cada
  coluna.
  <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(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.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_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 coluna, ele será exibido fora:
Gráficos de colunas empilhadas
Um gráfico de colunas empilhadas é sobreposto pelos valores relacionados. Se houver valores negativos, eles serão empilhados em ordem inversa abaixo do valor de referência do gráfico. Normalmente, ele é usado 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 colunas 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 colunas 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 os valores de marcação/eixo usando a escala relativa de 0 a 1.
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
    
  
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    
  Como criar gráficos de colunas 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 colunas do Material Design é semelhante à criação do que
agora chamaremos de gráfico de colunas "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.ColumnChart).
Como os gráficos de barras e de colunas são essencialmente idênticos, mas
em relação à orientação, chamamos ambos os gráficos do Material Design, independentemente
de as barras serem verticais (classificadas, um gráfico de colunas) ou
horizontais (um gráfico de barras). No Material Design, a única diferença está na
opção bars. Quando definida como 'horizontal', a
orientação será semelhante ao gráfico de barras clássico tradicional. Caso contrário, as
barras serão verticais.
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 colunas do Material Design têm muitas pequenas melhorias em relação aos gráficos de colunas 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',
          }
        };
        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; 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 o Material Design:
  chart.draw(data, options);
  ...por este:
  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-Y
Às vezes, você quer exibir duas séries em um gráfico de colunas, com dois eixos Y independentes: um eixo esquerdo para uma série e um eixo direito para outro:
Observe que os dois eixos y 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 vAxis.gridlines.
No código abaixo, as opções axes e series especificam a aparência dual Y 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 torna esse gráfico um gráfico dual Y, posicionando o eixo 'distance' à esquerda (identificado como "parsecs") e o eixo 'brightness' à direita (identificado "magnitude aparente").
<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', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);
      function drawStuff() {
        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');
        var data = 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 materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };
        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };
        function drawMaterialChart() {
          var materialChart = new google.charts.Bar(chartDiv);
          materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }
        function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }
        drawMaterialChart();
    };
    </script>
  </head>
  <body>
    <button id="change-chart">Change to Classic</button>
    <br><br>
    <div id="chart_div" style="width: 800px; 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([
          ['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 = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };
        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 800px; height: 600px;"></div>
  </body>
</html>
Carregando
  O nome do pacote google.charts.load é "corechart".
  O nome da classe da visualização é google.visualization.ColumnChart.
  google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ColumnChart(container);
Para gráficos de colunas do Material Design, o nome do pacote
google.charts.load é "bar". (Não é um erro de digitação: o gráfico de barras
do Material Design lida com as duas orientações.)
O nome da classe da visualização é google.charts.Bar. Não é um erro de digitação: o gráfico de barras do Material Design
processa as duas orientações.
  google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
Formato de dados
Cada linha na tabela representa um grupo de barras adjacentes.
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: 
 Tipo: string Padrão: 'linear' | 
| animation.startup | 
      Determina se o gráfico será animado no desenho inicial. Se definido como  Tipo: booleano Padrão: "false" | 
| annotations.alwaysOutside | 
      Nos gráficos de barras e 
      colunas, se definidos como  Tipo: booleano Padrão:false | 
| annotations.boxStyle | 
      Para gráficos compatíveis com anotações, o objeto  
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.datum | 
      Para gráficos compatíveis com anotações, o objeto  annotations.datumpermite 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
      comannotations.datum.stem.color, o comprimento da haste
      comannotations.datum.stem.lengthe o estilo comannotations.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.domainpermite 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
      comannotations.domain.stem.color, o comprimento da haste
      comannotations.domain.stem.lengthe o estilo comannotations.domain.style.Tipo: objeto Padrão:a cor é "preto", o comprimento é 5, e o estilo é "ponto". | 
| annotations.highContrast | 
      Para gráficos compatíveis com anotações, o booleano  annotations.highContrastpermite 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ê definirannotations.highContrastcomo 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.stempermite substituir
      a escolha do Google Charts para o estilo de "stem". Você pode controlar a cor
      comannotations.stem.colore o comprimento da haste
      comannotations.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.stylepermite 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.textStylecontrola 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: 
 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:  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:
     
 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:  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:
     
 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:  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  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: 
 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  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  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  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  Tipo: número Padrão:4 | 
| explorer.zoomDelta | 
      Quando os usuários aumentam ou diminuem o zoom, o  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: 
 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 | 
| 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. Essa opção só é compatível com um eixo  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:  Essa opção só é compatível com um eixo  Tipo: número Padrão: "preto" | 
| hAxis.direction | 
      A direção em que os valores ao longo do eixo horizontal crescem. Especifique  Tipo:1 ou -1 Padrão: 1 | 
| hAxis.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,  
 
      Para rótulos de eixo de data, esse é um subconjunto do
      
        conjunto de padrões de ICU
       de formatação de datas. Por exemplo,  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  
      Essa opção só é compatível com um eixo  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}
      Essa opção só é compatível com um eixo  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  Tipo: número Padrão: -1 | 
| hAxis.gridlines.interval | 
      Uma matriz de tamanhos (como valores de dados, e não pixels) entre linhas de grade adjacentes.  No momento, essa opção é apenas para eixos numéricos, mas é análoga às opções  Tipo:número entre 1 e 10, não incluindo 10. Padrão:computada | 
| hAxis.gridlines.minSpacing | 
      O espaço mínimo na tela, em pixels, entre as principais linhas de grade do eixo h.
      O padrão para as principais linhas de grade é  Tipo: número Padrão:computada | 
| hAxis.gridlines.multiple | Todos os valores de linhas de grade e escalas precisam ser múltiplos do valor desta
      opção.  Observe que, ao contrário dos intervalos, potências de 10 vezes o múltiplo não são consideradas.
      Portanto, você pode forçar as marcações a serem números inteiros especificando
       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. 
      Essa opção só é compatível com um eixo  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  Tipo: número Padrão:1 | 
| hAxis.minorGridlines.interval | A opção smallGridlines.interval é como a opção de intervalo das linhas de grade principais, mas o intervalo escolhido sempre será um divisor par do intervalo da linha de grade principal.
      O intervalo padrão para escalas lineares é
       Tipo: número Padrão:1 | 
| hAxis.minorGridlines.minSpacing | O espaço mínimo necessário, em pixels, entre linhas de grade secundárias adjacentes e entre linhas de grade secundárias e principais. O valor padrão é 1/2 do minSpacing das principais linhas de grade para escalas lineares e 1/5 do minSpacing para escalas de registro. Tipo: número Padrão:calculado | 
| hAxis.minorGridlines.multiple | Igual à  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  Essa opção só é compatível com um eixo  Tipo: booleano Padrão:false | 
| hAxis.scaleType | 
      A propriedade  
 Essa opção só é compatível com um eixo  Tipo: string Padrão: nulo | 
| 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.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  Tipo: objeto 
      Padrão: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| 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  
      A viewWindow será expandida automaticamente para
      incluir as marcações mínima e máxima, a menos que você especifique um
       Por exemplo: 
 
      Essa opção só é compatível com um eixo  Tipo:matriz de elementos Padrão:automático | 
| hAxis.title | 
      A propriedade  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  Tipo: objeto 
      Padrão: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| hAxis.allowContainerBoundaryTextCutoff | Se for falso, ocultará os rótulos mais externos em vez de permitir que eles sejam cortados pelo contêiner do gráfico. Se verdadeiro, permitirá o corte de rótulos. Essa opção só é compatível com um eixo  Tipo: booleano Padrão:false | 
| hAxis.slantedText | 
      Se verdadeiro, desenhe o texto do eixo horizontal em um ângulo para ajudar a encaixar mais texto ao longo do eixo. Se falso, desenhe o texto do eixo horizontal na vertical. O comportamento padrão é inclinar o texto se ele não encaixar na posição vertical. Essa opção está disponível apenas quando  Tipo: booleano Padrão:automático | 
| hAxis.slantedTextAngle | 
      É o ângulo do texto do eixo horizontal, se ele tiver sido desenhado inclinado. Ignorado se  Tipo: número, -90–90 Padrão:30 | 
| hAxis.maxAlternation | Número máximo de níveis de texto do eixo horizontal. Se os rótulos de texto do eixo ficarem muito poluídos, o servidor poderá deslocar os rótulos vizinhos para cima ou para baixo a fim de aproximá-los. Esse valor especifica o maior número de níveis a ser usado. O servidor pode usar menos níveis, se os rótulos couberem sem se sobrepor. Para datas e horas, o padrão é 1. Tipo: número Padrão:2 | 
| hAxis.maxTextLines | Número máximo de linhas permitidas para os rótulos de texto. Os rótulos podem abranger várias linhas se forem muito longos, e o número de linhas é, por padrão, limitado pela altura do espaço disponível. Tipo: número Padrão:automático | 
| hAxis.minTextSpacing | Espaçamento horizontal mínimo, em pixels, permitido entre dois rótulos de texto adjacentes. Se os rótulos forem muito densos ou muito longos, o espaçamento poderá ficar abaixo desse limite e, nesse caso, uma das medidas de organização de rótulos será aplicada (por exemplo, truncando os rótulos ou descartando alguns deles). Tipo: número Padrão:o valor de  hAxis.textStyle.fontSize | 
| hAxis.showTextEvery | Quantos rótulos de eixo horizontal serão exibidos, em que 1 significa mostrar todos os rótulos, 2 significa mostrar todos os outros rótulos e assim por diante. O padrão é tentar mostrar o maior número possível de rótulos sem sobreposição. Tipo: número Padrão:automático | 
| 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.
       
      Essa opção só é compatível com um eixo  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.
       
      Essa opção só é compatível com um eixo  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: 
 
      Essa opção só é compatível com um eixo  Tipo: string 
      Padrão:equivalente a "pretty", mas  haxis.viewWindow.minehaxis.viewWindow.maxtêm precedência, se usados. | 
| hAxis.viewWindow | Especifica o intervalo de corte do eixo horizontal. Tipo: objeto Padrão:nulo | 
| hAxis.viewWindow.max | 
 Ignorado quando  Tipo: número Padrão:automático | 
| hAxis.viewWindow.min | 
 Ignorado quando  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  As opções para  
 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  
      O empilhamento 100% só oferece suporte a valores de dados do tipo  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: 
 Tipo: string Padrão: "right" | 
| legend.alignment | Alinhamento da legenda. Será um dos seguintes valores: 
 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  Tipo: objeto 
      Padrão: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| orientação | 
      A orientação do gráfico. Quando definida como  Tipo: string Padrão: "horizontal" | 
| reverseCategories | Se definida como verdadeira, desenhará séries da direita para a esquerda. O padrão é desenhar da esquerda para a direita. 
      Essa opção só é compatível com um eixo  Tipo: booleano Padrão:false | 
| 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: 
 É 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: 
 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: 
 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  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  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  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  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: 
 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  
 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  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  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  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  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 | 
| vAxes | 
      Especifica propriedades para eixos verticais individuais, se o gráfico tiver vários eixos verticais.
      Cada objeto filho é um objeto  
      Para especificar um gráfico com vários eixos verticais, primeiro defina um novo eixo usando  
{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    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  
vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    Tipo: matriz de objeto ou objeto com objetos filhos Padrão:nulo | 
| 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  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:  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  Tipo:1 ou -1 Padrão: 1 | 
| vAxis.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,  
 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  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}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  Tipo: número Padrão: -1 | 
| vAxis.gridlines.interval | 
      Uma matriz de tamanhos (como valores de dados, e não pixels) entre linhas de grade adjacentes.  No momento, essa opção é apenas para eixos numéricos, mas é análoga às opções  Tipo:número entre 1 e 10, não incluindo 10. Padrão:computada | 
| vAxis.gridlines.minSpacing | 
      O espaço mínimo na tela, em pixels, entre as principais linhas de grade do eixo h.
      O padrão para as principais linhas de grade é  Tipo: número Padrão:computada | 
| vAxis.gridlines.multiple | Todos os valores de linhas de grade e escalas precisam ser múltiplos do valor desta
      opção.  Observe que, ao contrário dos intervalos, potências de 10 vezes o múltiplo não são consideradas.
      Portanto, você pode forçar as marcações a serem números inteiros especificando
       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. 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.interval | A opção smallGridlines.interval é como a opção de intervalo das linhas de grade principais, mas o intervalo escolhido sempre será um divisor par do intervalo da linha de grade principal.
      O intervalo padrão para escalas lineares é
       Tipo: número Padrão:1 | 
| vAxis.minorGridlines.minSpacing | O espaço mínimo necessário, em pixels, entre linhas de grade secundárias adjacentes e entre linhas de grade secundárias e principais. O valor padrão é 1/2 do minSpacing das principais linhas de grade para escalas lineares e 1/5 do minSpacing para escalas de registro. Tipo: número Padrão:calculado | 
| vAxis.minorGridlines.multiple | Igual à  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. Tipo: booleano Padrão:false | 
| vAxis.scaleType | 
      A propriedade  
 Essa opção só é compatível com um eixo  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  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  
      A viewWindow será expandida automaticamente para
      incluir as marcações mínima e máxima, a menos que você especifique um
       Por exemplo: 
 Tipo:matriz de elementos Padrão:automático | 
| vAxis.title | Propriedade  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  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.
       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.
       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: 
 Tipo: string 
      Padrão:equivalente a "pretty", mas  vaxis.viewWindow.minevaxis.viewWindow.maxtêm precedência, se usados. | 
| vAxis.viewWindow | Especifica o intervalo de corte do eixo vertical. Tipo: objeto Padrão:nulo | 
| vAxis.viewWindow.max | O valor máximo dos dados verticais a serem renderizados. Ignorado quando  Tipo: número Padrão:automático | 
| vAxis.viewWindow.min | O valor mínimo de dados verticais a ser renderizado. Ignorado quando  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  Return Type: nenhum | 
| getAction(actionID) | Retorna o objeto de ação da dica com o  Tipo de retorno: objeto | 
| getBoundingBox(id) | 
      Retorna um objeto que contém as informações de esquerda, parte superior, largura e altura do elemento  
 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): 
 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: 
 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  Exemplo:  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.
    
    
      
    Uma barra corresponde a uma célula na tabela de dados, a uma entrada de legenda em uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice de coluna é nulo).
    
    
      Neste gráfico, apenas uma entidade pode ser selecionada por vez.
    
      
         Tipo de retorno:matriz de elementos de seleção | 
| getVAxisValue(yPosition, optional_axis_index) | 
      Retorna o valor de dados vertical em  Exemplo:  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  Exemplo:  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  Exemplo:  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  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  
      Todas as ações de dica precisam ser definidas antes de chamar o método  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.
    
    
      
    Uma barra corresponde a uma célula na tabela de dados, a uma entrada de legenda em uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice de coluna é nulo).
    
    
      Neste gráfico, apenas uma entidade pode ser selecionada por vez.
    
      
         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. 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. 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  Properties:nenhuma | 
| select | 
      Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame
       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.