Visão geral
Um gráfico de área em degraus que é renderizado no navegador usando SVG ou VML. Mostra dicas ao passar o cursor sobre as etapas.
Um exemplo simples
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
          ['Alfred Hitchcock (1935)', 8.4,         7.9],
          ['Ralph Thomas (1959)',     6.9,         6.5],
          ['Don Sharp (1978)',        6.5,         6.4],
          ['James Hawes (2008)',      4.4,         6.2]
        ]);
        var options = {
          title: 'The decline of \'The 39 Steps\'',
          vAxis: {title: 'Accumulated Rating'},
          isStacked: true
        };
        var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
Algumas opções comuns
Como todos os gráficos do Google, os gráficos de área em degraus têm muitas opções, mostradas aqui. Aqui está um exemplo demonstrando algumas das mais comuns:
No gráfico acima, mudamos a cor do plano de fundo com backgroundColor, movemos a legenda para a parte inferior com legend.position, removemos as linhas verticais definindo connectSteps como falso e personalizamos as cores. Veja como isso foi feito:
  var options = {
      backgroundColor: '#ddd',
      legend: { position: 'bottom' },
      connectSteps: false,
      colors: ['#4374E0', '#53A8FB', '#F1CA3A', '#E49307'],
      isStacked: true,
  };
Gráficos de áreas em degraus empilhadas
  Os gráficos de área em degraus também têm suporte para empilhamento, incluindo 100% de empilhamento. Um gráfico de áreas empilhadas em degraus é de área em degraus que coloca valores relacionados uns sobre os outros. Se houver valores negativos, eles serão empilhados em ordem inversa abaixo do valor de referência do gráfico. Para 100% de empilhamento, as pilhas de elementos em cada valor de domínio são redimensionadas de modo que
  somem 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 de marcação são escritos com base na escala relativa de 0 a 1 como frações de 1.
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
    
  
        var options_fullStacked = {
          isStacked: 'relative',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    
  Carregando
O nome do pacote google.charts.load é "corechart".
  google.charts.load("current", {packages: ["corechart"]});
O nome da classe da visualização é google.visualization.SteppedAreaChart.
var visualization = new google.visualization.SteppedAreaChart(container);
Formato de dados
Linhas:cada linha na tabela representa um grupo de barras.
Columns:
| Coluna 0 | Coluna 1 | ... | Coluna N | |
|---|---|---|---|---|
| Finalidade: | Rótulos de grupo do eixo X | Valores da barra 1 neste grupo | ... | Barra N valores neste grupo | 
| Tipo de dados: | string | number | ... | number | 
| Role: | domínio | dados | ... | dados | 
| Papéis de coluna opcionais: | ... | 
Opções de configuração
| Nome | |
|---|---|
| aggregationTarget | 
     Como várias seleções de dados são agrupadas em dicas: 
    
 
      O  
   aggregationTarget geralmente será usado em conjunto com selectionMode e tooltip.trigger, por exemplo:
    
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
    
    Tipo: string 
    Padrão: "auto" 
   | 
| 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" 
   | 
| areaOpacity | 
       
        A opacidade padrão da área abaixo da etapa, em que 0.0 é totalmente transparente e 1.0 é totalmente opaco. Isso não afeta a opacidade da linha em degraus. Para criar um gráfico de linhas em degraus, defina esse valor como 0. Para especificar a opacidade de uma série individual, defina o valor  Tipo: número, 0,0–1,0 
      Padrão:0,3 
     | 
  
| 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" 
   | 
| 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 
   | 
| 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 
   | 
| connectSteps | 
       Se definida como verdadeira, conectará as etapas para formar uma linha em degraus. Caso contrário, apenas uma linha superior será exibida. O padrão é conectar as etapas. Tipo: booleano 
      Padrão:true 
     | 
  
| 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 
   | 
| 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.direction | 
     
      A direção em que os valores ao longo do eixo horizontal crescem. Especifique  Tipo:1 ou -1 
    Padrão: 1 
   | 
| 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: 
 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. 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.viewWindow | 
     Especifica o intervalo de corte do eixo horizontal. Tipo: objeto 
    Padrão:nulo 
   | 
| hAxis.viewWindow.max | 
    
    
    
    
         
          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  Ignorado quando  Tipo: número 
    Padrão:automático 
   | 
| hAxis.viewWindow.min | 
    
    
    
    
         
          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  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.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.maxLines | 
     Número máximo de linhas na legenda. Defina como um número maior que um para adicionar linhas à legenda. Observação: a lógica exata usada para determinar o número real de linhas renderizadas ainda está em fluxo. No momento, essa opção funciona apenas quando caption.position é "topo". Tipo: número 
    Padrão: 1 
   | 
| legend.position | 
     Posição da legenda. Será um dos seguintes valores: 
 Tipo: string 
    Padrão: "right" 
   | 
| 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>}
      
     | 
| lineDashStyle | 
     
      O padrão ativado e desativado para linhas tracejadas. Por exemplo,  Tipo:matriz de números 
    Padrão:nulo 
   | 
| reverseCategories | 
     Se definida como verdadeira, desenhará séries da direita para a esquerda. O padrão é desenhar da esquerda para a direita. Tipo: booleano 
    Padrão:false 
   | 
| selectionMode | 
     
      Quando  Tipo: string 
    Padrão: "single" 
   | 
| 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" 
   | 
| 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.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.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  
 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 de 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.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 | 
    
    
         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 etapas, entradas de legenda e categorias.
    
    
      
    Uma etapa corresponde a uma célula na tabela de dados, uma entrada de legenda em uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice da 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 etapas, entradas de legenda e categorias.
    
    
      
    Uma etapa corresponde a uma célula na tabela de dados, uma entrada de legenda em uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice da 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.