Visualização: gráfico de bolhas

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

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

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

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

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

• in - desenha os títulos dos eixos dentro da área do gráfico.
• out - desenha os títulos dos eixos fora da área do gráfico.
• nenhum: omite os títulos dos eixos.

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

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

A largura da borda, em pixels.

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

Um objeto com membros para configurar as propriedades visuais dos balões.

É a opacidade dos círculos, em que 0 é totalmente transparente, e 1 é totalmente opaco.

A cor do traço dos círculos.

Um objeto que especifica o estilo de texto do balão. O objeto tem este formato:

{color: <string>, fontName: <string>, fontSize: <number>}

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

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

• stroke: a cor, fornecida como uma string hexadecimal ou nome da cor em inglês.
• strokeWidth: se fornecido, desenha uma borda ao redor da área do gráfico com a largura especificada (e com a cor stroke).

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

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

Largura da área do gráfico.

Altura da área do gráfico.

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

Um objeto que especifica um mapeamento entre os valores da coluna de cores e as cores ou uma escala de gradiente. Para especificar as propriedades desse objeto, é possível usar a notação literal de objeto, como mostrado aqui:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}

Se presente, especifica um valor mínimo para os dados de cores do gráfico. Os valores de dados de cores desse valor e de valores inferiores serão renderizados como a primeira cor no intervalo colorAxis.colors.

Se presente, especifica um valor máximo para os dados de cores do gráfico. Os valores de dados de cores desse valor e de valores mais altos serão renderizados como a última cor no intervalo colorAxis.colors.

Se presente, controla como os valores são associados às cores. Cada valor é associado à cor correspondente na matriz colorAxis.colors. Esses valores se aplicam aos dados de cores do gráfico. A coloração é feita de acordo com um gradiente dos valores especificados aqui. Não especificar um valor para essa opção equivale a especificar [minValue, maxValue].

Cores a serem atribuídas a valores na visualização. Uma matriz de strings, em que cada elemento é uma string de cor HTML, por exemplo: colorAxis: {colors:['red','#004411']}. É preciso ter pelo menos dois valores. O gradiente incluirá todos os seus valores, além dos valores intermediários calculados, sendo que a primeira cor é o menor valor e a última, o mais alto.

Um objeto que especifica o estilo da legenda da cor do gradiente.

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

• "top" - acima do gráfico.
• "bottom" - abaixo do gráfico.
• "in": dentro do gráfico, na parte superior.
• "none": nenhuma legenda é exibida.

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

Uma string de formato para rótulos numéricos. Esse é um subconjunto do conjunto de padrões de ICU . Por exemplo, {numberFormat:'.##'} exibirá os valores "10,66", "10,6" e "10,0" para os valores 10,666, 10,6 e 10.

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.

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

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

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

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

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

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

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

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

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

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

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.

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.

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.

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'
  }
}
    

A linha de base do eixo horizontal.

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

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

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

• {format: 'none'}: mostra números sem formatação (por exemplo, 8.000.000)
• {format: 'decimal'}: exibe números com separadores de milhares (por exemplo, 8.000.000)
• {format: 'scientific'}: mostra números em notação científica (por exemplo, 8e6)
• {format: 'currency'}: exibe os números na moeda local (por exemplo, USD 8.000.000,00)
• {format: 'percent'}: mostra números como porcentagens (por exemplo, 800.000.000%)
• {format: 'short'}: mostra números abreviados (por exemplo, 8 mi)
• {format: 'long'}: exibe números como palavras inteiras (por exemplo, 8 milhões)

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

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

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}

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

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

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.

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

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

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

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.

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

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

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

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

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

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

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

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

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

Por exemplo:

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

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

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

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

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

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

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

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

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

Especifica o intervalo de corte do eixo horizontal.

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

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

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

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

Altura do gráfico, em pixels.

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}}

Alinhamento da legenda. Será um dos seguintes valores:

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

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

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

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".

Índice de página inicial selecionado da legenda.

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

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

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

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

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

Quando selectionMode for 'multiple', os usuários poderão selecionar vários pontos de dados.

Um objeto de objetos em que as chaves são nomes de séries (os valores na coluna Cor) e cada objeto descrevendo o formato da série correspondente no gráfico. Se uma série ou um valor não for especificado, o valor global será usado. Cada objeto é compatível com as seguintes propriedades:

• color: a cor a ser usada na série. Especifique uma string de cor HTML válida.
• visibleInLegend: um valor booleano, em que "true" significa que a série precisa ter uma entrada de legenda, e "false" significa que ela não precisa. O padrão é verdadeiro.

series: {'Europe': {color: 'green'}}

Um objeto com membros para configurar como os valores são associados ao tamanho do balão. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui:

 {minValue: 0,  maxSize: 20}

É o raio máximo do maior balão possível, em pixels.

O valor do tamanho (conforme aparece nos dados do gráfico) a ser mapeado para sizeAxis.maxSize. Valores maiores serão cortados para esse valor.

Raio mínimo do menor balão possível, em pixels.

O valor do tamanho (conforme aparece nos dados do gráfico) a ser mapeado para sizeAxis.minSize. Valores menores serão cortados para esse valor.

Se verdadeiro, classifica os balões por tamanho para que os menores apareçam acima dos maiores. Se for falso, os balões serão classificados de acordo com sua ordem no DataTable.

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

• "maximized": maximiza a área do gráfico e desenha a legenda e todos os rótulos dentro da área do gráfico. Define as seguintes opções:

  chartArea: {width: '100%', height: '100%'},
  legend: {position: 'in'},
  titlePosition: 'in', axisTitlesPosition: 'in',
  hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
          

Texto a ser exibido acima do gráfico.

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

• in - desenha o título dentro da área do gráfico.
• out - desenha o título fora da área do gráfico.
• nenhum: omite o título.

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

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

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

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}

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.

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

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

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

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

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

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'}}

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

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

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

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

• {format: 'none'}: mostra números sem formatação (por exemplo, 8.000.000)
• {format: 'decimal'}: exibe números com separadores de milhares (por exemplo, 8.000.000)
• {format: 'scientific'}: mostra números em notação científica (por exemplo, 8e6)
• {format: 'currency'}: exibe os números na moeda local (por exemplo, USD 8.000.000,00)
• {format: 'percent'}: mostra números como porcentagens (por exemplo, 800.000.000%)
• {format: 'short'}: mostra números abreviados (por exemplo, 8 mi)
• {format: 'long'}: exibe números como palavras inteiras (por exemplo, 8 milhões)

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

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

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}

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

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

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.

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

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

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).

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.

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

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

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

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

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

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

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

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

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

Por exemplo:

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

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

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

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

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

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

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

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

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

Especifica o intervalo de corte do eixo vertical.

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

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

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

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

Largura do gráfico, em pixels.

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

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

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

var cli = chart.getChartLayoutInterface();

Altura da área do gráfico

cli.getBoundingBox('chartarea').height

Largura da terceira barra na primeira série de um gráfico de barras ou colunas

cli.getBoundingBox('bar#0#2').width

Caixa delimitadora do quinto encaixe de um gráfico de pizza

cli.getBoundingBox('slice#4')

Caixa delimitadora dos dados de um gráfico vertical (por exemplo, coluna):

cli.getBoundingBox('vAxis#0#gridline')

Caixa delimitadora dos dados de um gráfico horizontal (por exemplo, de barras):

cli.getBoundingBox('hAxis#0#gridline')

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

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

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left

cli.getChartAreaBoundingBox().top

cli.getChartAreaBoundingBox().height

cli.getChartAreaBoundingBox().width

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

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

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

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

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

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

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

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

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.

Retorna uma matriz das entidades de gráfico selecionadas. As entidades selecionáveis são balões. Neste gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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.

Disparado quando o usuário passa o mouse sobre uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Uma bolha está correlacionada a uma linha na tabela de dados (o índice da coluna é nulo).

Disparado quando o usuário afasta o mouse de uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Uma bolha está correlacionada a uma linha na tabela de dados (o índice da coluna é nulo).

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

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