Visão geral
Um gráfico que permite renderizar cada série como um tipo de marcador diferente da lista a seguir: linha, área, barras, velas e área em degraus.
  Para atribuir um tipo de marcador padrão às séries, especifique a propriedade seriesType.
  Use a propriedade series para especificar as propriedades de cada série individualmente.
Exemplo
<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(drawVisualization);
      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
          ['2004/05',  165,      938,         522,             998,           450,      614.6],
          ['2005/06',  135,      1120,        599,             1268,          288,      682],
          ['2006/07',  157,      1167,        587,             807,           397,      623],
          ['2007/08',  139,      1110,        615,             968,           215,      609.4],
          ['2008/09',  136,      691,         629,             1026,          366,      569.6]
        ]);
        var options = {
          title : 'Monthly Coffee Production by Country',
          vAxis: {title: 'Cups'},
          hAxis: {title: 'Month'},
          seriesType: 'bars',
          series: {5: {type: 'line'}}
        };
        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
Carregando
O nome do pacote google.charts.load é "corechart"
  google.charts.load("current", {packages: ["corechart"]});
O nome da classe da visualização é google.visualization.ComboChart
var visualization = new google.visualization.ComboChart(container);
Formato de dados
Linhas:cada linha na tabela representa um conjunto de pontos de dados com a mesma localização no eixo X.
Columns:
| Coluna 0 | Coluna 1 | ... | Coluna N | |
|---|---|---|---|---|
| Finalidade: | Valores da linha 1 | ... | Valores da linha N | |
| Tipo de dados: | 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" | 
| 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 | 
| areaOpacity | 
      É a opacidade padrão da área colorida em uma série de gráfico de área, em que 0.0 é totalmente transparente e 1.0 é totalmente opaco. Para especificar a opacidade de uma série individual, defina o valor da áreaOpacity na propriedade  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" | 
| 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%".
     | 
| candlestick.hollowIsRising | Se verdadeiro, as velas em ascensão vão parecer vazias, e as velas caindo, sólidas, caso contrário, o oposto. Tipo: booleano Padrão:falso (depois será alterado para verdadeiro) | 
| candlestick.fallingColor.fill | A cor de preenchimento de velas em queda, como uma string de cor HTML. Tipo: string Padrão:automático (depende da cor da série e de hollowIsRising) | 
| candlestick.fallingColor.stroke | A cor do traço das velas em queda, como uma string de cor HTML. Tipo: string Padrão:automático (a cor da série) | 
| candlestick.fallingColor.strokeWidth | A largura do traço das velas em queda, como uma string de cor HTML. Tipo: 2 Padrão:número | 
| candlestick.risingColor.fill | A cor de preenchimento de velas em ascensão, como uma string de cor HTML. Tipo: string Padrão:automático (cor branca ou a cor da série, dependendo de hollowIsRising) | 
| candlestick.risingColor.stroke | A cor do traço das velas em ascensão, como uma string de cor HTML. Tipo: string Padrão:automático (a cor da série ou branco, dependendo de hollowIsRising) | 
| candlestick.risingColor.strokeWidth | A largura do traço das velas em ascensão, como uma string de cor HTML. Tipo: número Padrão:2 | 
| 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 | 
| mira | Um objeto que contém as propriedades de mira do gráfico. Tipo: objeto Padrão:nulo | 
| crosshair.color | A cor da cruz, expressa como um nome de cor (por exemplo, "blue") ou um valor RGB (por exemplo, "#adf"). Tipo: string Tipo:default | 
| crosshair.focused | 
      Um objeto que contém as propriedades da cruz no foco. Tipo: objeto Padrão:padrão | 
| crosshair.opacity | 
      A opacidade da cruz, sendo  Tipo: número Padrão:1,0 | 
| crosshair.orientation | A orientação da cruz, que pode ser "vertical" apenas para cabelos verticais, "horizontal" apenas para cabelos horizontais ou "ambas" para miras tradicionais. Tipo: string Padrão: "ambos" | 
| crosshair.selected | 
      Um objeto que contém as propriedades da cruz após a seleção. Tipo: objeto Padrão:padrão | 
| crosshair.trigger | 
      Quando mostrar linhas de referência: em  Tipo: string Padrão: "ambos" | 
| curveType | Controla a curva das linhas quando a largura da linha não é zero. Será um dos seguintes valores: 
 Tipo:string Padrão: 'none' | 
| 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 | 
| 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 | 
| interpolateNulls | Define se o valor de pontos ausentes deve ser determinado. Se verdadeiro, ele adivinhará o valor de todos os dados ausentes com base nos pontos vizinhos. Se for falso, vai deixar uma quebra na linha em um ponto desconhecido. 
      Isso não é compatível com gráficos de área com a opção  Tipo: booleano Padrão:false | 
| isStacked | Se definido como verdadeiro, os elementos de série do mesmo tipo serão empilhados. Afeta somente séries de barras, colunas e áreas. Tipo: booleano 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.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.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 | 
| lineWidth | 
      Largura da linha de dados em pixels. Use zero para ocultar todas as linhas e mostrar apenas os pontos. É possível modificar os valores de séries individuais usando a propriedade  Tipo: número Padrão:2 | 
| orientação | 
      A orientação do gráfico. Quando definida como  Tipo: string Padrão: "horizontal" | 
| pointShape | A forma de elementos de dados individuais: "circle", "triângulo", "quadrado", "diamante", "estrela" ou "polígono". Consulte a documentação de pontos para ver exemplos. Tipo: string Padrão: "circle" | 
| pointSize | 
      Diâmetro dos pontos exibidos em pixels. Use zero para ocultar todos os pontos.  É possível modificar os valores de séries individuais usando a propriedade  Tipo: número Padrão:0 | 
| pointsVisible | 
      Determina se os pontos serão exibidos. Defina como  
      Ele também pode ser substituído usando o papel de estilo na forma de  Tipo: booleano Padrão:true | 
| 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 | 
| 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: {} | 
| seriesType | 
        É o tipo de linha padrão para qualquer série não especificada na propriedade  Tipo: string Padrão: 'line' | 
| 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.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 
    pontos, barras, etapas, anotações, entradas de legenda e categorias
.
    
    
      
    Um ponto, barra, etapa ou anotação corresponde a uma célula na tabela de dados,
    uma entrada de legenda a 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 
    pontos, barras, etapas, anotações, entradas de legenda e categorias
.
    
    
      
    Um ponto, barra, etapa ou anotação corresponde a uma célula na tabela de dados,
    uma entrada de legenda a 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.