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  aggregationTargetgeralmente será usado em conjunto comselectionModeetooltip.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.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 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.