Visão geral
Um gráfico de área renderizado no navegador usando SVG ou VML. Mostra dicas ao passar o cursor sobre os pontos.
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([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
Áreas empilhadas
Por padrão, o gráfico de área desenha a série uma em cima da outra. Em vez disso, é possível empilhá-los
uns sobre os outros para que os valores de dados de cada valor x sejam somados. Em um gráfico de área, o valor de cada série será sempre empilhado em relação ao valor da série anterior. Empilhar uma mistura de valores negativos e positivos fará com que as áreas se sobreponham. É importante observar que a opção interpolateNulls não funciona com gráficos de área empilhada.
À esquerda, isStacked é definido como falso (o padrão) e, à direita, como verdadeiro:
A ordem das entradas de legenda é diferente. No segundo gráfico empilhado, a ordem é invertida, colocando a série 0 na parte inferior para melhor corresponder ao empilhamento dos elementos da série, fazendo com que a legenda corresponda aos dados.
Os gráficos de área empilhada também são compatíveis com 100% de empilhamento. Nesse caso, as pilhas de elementos em cada valor de domínio são redimensionadas de modo a somar 100%. As opções para isso são
isStacked: 'percent', que formata cada valor como uma porcentagem de 100%, e
isStacked: 'relative', que formata cada valor como uma fração de 1. Há também
uma opção isStacked: 'absolute', que é funcionalmente equivalente a
isStacked: true.
Observe que, no gráfico 100% empilhado à direita, os valores de marcação são baseados 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]
}
};
Suponha que uma das suas séries não tenha dados para alguns dos seus valores x. Por exemplo, nos gráficos acima, vamos supor que os drones não estão disponíveis até 2015 e os Segways não estão disponíveis em 2014. Observe que usamos valores nulos quando faltam dados, então o gráfico ficaria assim:
Se essas descontinuidades não forem interessantes, você poderá substituir zeros pelos nulos e/ou definir a opção interpolateNulls como "true":
Carregando
O nome do pacote google.charts.load é "corechart".
google.charts.load("current", {packages: ["corechart"]});
O nome da classe da visualização é google.visualization.AreaChart.
var visualization = new google.visualization.AreaChart(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
aggregationTarget geralmente será usado em conjunto com selectionMode e tooltip.trigger, por exemplo:
var options = {
// Allow multiple
// simultaneous selections.
selectionMode: 'multiple',
// Trigger tooltips
// on selections.
tooltip: {trigger: 'selection'},
// Group selections
// by x-value.
aggregationTarget: 'category',
};
Tipo: string
Padrão: "auto"
|
| animation.duration |
É a duração da animação, em milissegundos. Para ver mais detalhes, consulte a documentação de animação. Tipo: número
Padrão:0
|
| animation.easing |
A função de easing aplicada à animação. As seguintes opções estão disponíveis:
Tipo: string
Padrão: 'linear'
|
| animation.startup |
Determina se o gráfico será animado no desenho inicial. Se definido como Tipo: booleano
Padrão: "false"
|
| 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.datum permite 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
com annotations.datum.stem.color, o comprimento da haste
com annotations.datum.stem.length e o estilo com annotations.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.domain permite 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
com annotations.domain.stem.color, o comprimento da haste
com annotations.domain.stem.length e o estilo com annotations.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.highContrast permite 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ê definir annotations.highContrast como 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.stem permite substituir
a escolha do Google Charts para o estilo de "stem". Você pode controlar a cor
com annotations.stem.color e o comprimento da haste
com annotations.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.style permite 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.textStyle controla 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"
|
| 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"
|
| dataOpacity |
A transparência dos pontos de dados, sendo 1,0 completamente opaco e 0,0 totalmente transparente. Em gráficos de dispersão, histograma, barras e colunas, isso se refere aos dados visíveis: pontos no gráfico de dispersão e retângulos nos outros. Nos gráficos em que a seleção de dados cria um ponto, como os gráficos de linhas e áreas, isso se refere aos círculos que aparecem ao passar o cursor ou quando você é selecionado. O gráfico de combinação exibe os dois comportamentos, e essa opção não afeta os outros gráficos. Para mudar a opacidade de uma linha de tendência, consulte Opacidade da linha de tendência . Tipo: número
Padrão:1,0
|
| enableInteractivity |
Se o gráfico gera eventos com base no usuário ou reage à interação do usuário. Se for falso, o gráfico não vai gerar "select" ou outros eventos baseados em interação (mas vai gerar eventos prontos ou de erro) e não vai mostrar texto de passar o cursor nem mudar de acordo com a entrada do usuário. Tipo: booleano
Padrão:true
|
| explorer |
A opção Este recurso é experimental e pode mudar em versões futuras. Observação:o explorador só funciona com eixos contínuos (como números ou datas). Tipo: objeto
Padrão:nulo
|
| explorer.actions |
O explorador do Google Charts é compatível com três ações:
Tipo:matriz de strings
Padrão: ['dragToPan', 'rightClickToReset']
|
| explorer.axis |
Por padrão, os usuários podem movimentar a horizontal e a vertical quando a opção Tipo: string
Padrão:movimentação horizontal e vertical
|
| explorer.keepInBounds |
Por padrão, os usuários podem movimentar a tela, independentemente de onde os dados estejam. Para garantir que os usuários não sejam além do gráfico original, use Tipo: booleano
Padrão:false
|
| explorer.maxZoomIn |
O nível máximo de zoom que o explorador pode aumentar. Por padrão, os usuários poderão aumentar o zoom o suficiente para ver apenas 25% da visualização original. Definir Tipo: número
Padrão:0,25
|
| explorer.maxZoomOut |
O máximo que o explorador pode diminuir o zoom. Por padrão, os usuários podem diminuir o zoom o suficiente para que o gráfico ocupe apenas 1/4 do espaço disponível. Definir Tipo: número
Padrão:4
|
| explorer.zoomDelta |
Quando os usuários aumentam ou diminuem o zoom, o Tipo: número
Padrão:1,5
|
| focusTarget |
O tipo de entidade que recebe o foco ao passar o cursor. Também afeta qual entidade é selecionada pelo clique do mouse e qual elemento da tabela de dados está associado aos eventos. Pode ser uma das seguintes opções:
Em FocusTarget 'category', a dica de ferramenta mostra todos os valores da categoria. Isso pode ser útil para comparar valores de séries diferentes. Tipo: string
Padrão: 'datum'
|
| fontSize |
O tamanho da fonte padrão, em pixels, de todo o texto no gráfico. É possível modificar isso usando propriedades de elementos específicos do gráfico. Tipo: número
Padrão:automático
|
| fontName |
O tipo de fonte padrão para todo o texto no gráfico. É possível modificar isso usando propriedades de elementos específicos do gráfico. Tipo: string
Padrão: "Arial"
|
| forceIFrame |
Desenha o gráfico dentro de um frame inline. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames. Tipo: booleano
Padrão:false
|
| hAxis |
Um objeto com membros para configurar vários elementos do eixo horizontal. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui:
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
Tipo: objeto
Padrão:nulo
|
| hAxis.baseline |
A linha de base do eixo horizontal. Essa opção só é compatível com um eixo Tipo: número
Padrão:automático
|
| hAxis.baselineColor |
A cor da linha de base do eixo horizontal. Pode ser qualquer string de cor HTML, por exemplo: Essa opção só é compatível com um eixo Tipo: número
Padrão: "preto"
|
| hAxis.direction |
A direção em que os valores ao longo do eixo horizontal crescem. Especifique Tipo:1 ou -1
Padrão: 1
|
| hAxis.format |
Uma string de formato para rótulos numéricos ou de data do eixo.
Para rótulos de eixo numérico, esse é um subconjunto do
conjunto de padrões de ICU
de formatação decimal. Por exemplo,
Para rótulos de eixo de data, esse é um subconjunto do
conjunto de padrões de ICU
de formatação de datas. Por exemplo, A formatação real aplicada ao rótulo é derivada da localidade com que a API foi carregada. Para mais detalhes, consulte Como carregar gráficos com uma localidade específica .
No cálculo de valores de marcação e linhas de grade, várias combinações alternativas de todas as opções de linha de grade relevantes serão consideradas, e alternativas serão rejeitadas se os rótulos de marcação formatados forem duplicados ou sobrepostos.
Portanto, você pode especificar
Essa opção só é compatível com um eixo Tipo: string
Padrão:automático
|
| hAxis.gridlines |
Um objeto com propriedades para configurar as linhas de grade no eixo horizontal. As linhas de grade do eixo horizontal são desenhadas verticalmente. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {color: '#333', minSpacing: 20}
Essa opção só é compatível com um eixo Tipo: objeto
Padrão:nulo
|
| hAxis.gridlines.color |
A cor das linhas de grade horizontais dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão: "#CCC"
|
| hAxis.gridlines.count |
O número aproximado de linhas de grade horizontais dentro da área do gráfico.
Se você especificar um número positivo para Tipo: número
Padrão: -1
|
| hAxis.gridlines.interval |
Uma matriz de tamanhos (como valores de dados, e não pixels) entre linhas de grade adjacentes. No momento, essa opção é apenas para eixos numéricos, mas é análoga às opções Tipo:número entre 1 e 10, não incluindo 10.
Padrão:computada
|
| hAxis.gridlines.minSpacing |
O espaço mínimo na tela, em pixels, entre as principais linhas de grade do eixo h.
O padrão para as principais linhas de grade é Tipo: número
Padrão:computada
|
| hAxis.gridlines.multiple |
Todos os valores de linhas de grade e escalas precisam ser múltiplos do valor desta
opção. Observe que, ao contrário dos intervalos, potências de 10 vezes o múltiplo não são consideradas.
Portanto, você pode forçar as marcações a serem números inteiros especificando
Tipo: número
Padrão: 1
|
| hAxis.gridlines.units |
Modifica o formato padrão para vários aspectos dos tipos de dados de data/hora/hora/hora quando usados com linhas de grade calculadas em gráficos. Permite a formatação para anos, meses, dias, horas, minutos, segundos e milissegundos. O formato geral é:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Para mais informações, consulte Datas e horas. Tipo: objeto
Padrão:nulo
|
| hAxis.minorGridlines |
Um objeto com membros para configurar as linhas de grade secundárias no eixo horizontal, semelhante à opção hAxis.gridlines.
Essa opção só é compatível com um eixo Tipo: objeto
Padrão:nulo
|
| hAxis.minorGridlines.color |
A cor das linhas de grade menores horizontais dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão:uma mistura das cores de linha de grade e de plano de fundo
|
| hAxis.minorGridlines.count |
A opção Tipo: número
Padrão:1
|
| hAxis.minorGridlines.interval |
A opção smallGridlines.interval é como a opção de intervalo das linhas de grade principais, mas o intervalo escolhido sempre será um divisor par do intervalo da linha de grade principal.
O intervalo padrão para escalas lineares é
Tipo: número
Padrão:1
|
| hAxis.minorGridlines.minSpacing |
O espaço mínimo necessário, em pixels, entre linhas de grade secundárias adjacentes e entre linhas de grade secundárias e principais. O valor padrão é 1/2 do minSpacing das principais linhas de grade para escalas lineares e 1/5 do minSpacing para escalas de registro. Tipo: número
Padrão:calculado
|
| hAxis.minorGridlines.multiple |
Igual à Tipo: número
Padrão: 1
|
| hAxis.minorGridlines.units |
Substitui o formato padrão de vários aspectos dos tipos de dados date/datetime/timeofday quando usados com smallGridlines calculadas em gráfico. Permite a formatação para anos, meses, dias, horas, minutos, segundos e milissegundos. O formato geral é:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Para mais informações, consulte Datas e horas. Tipo: objeto
Padrão:nulo
|
| hAxis.logScale |
Propriedade Essa opção só é compatível com um eixo Tipo: booleano
Padrão:false
|
| hAxis.scaleType |
A propriedade
Essa opção só é compatível com um eixo Tipo: string
Padrão: nulo
|
| hAxis.textPosition |
Posição do texto do eixo horizontal em relação à área do gráfico. Valores aceitos: 'out', 'in', 'none'. Tipo: string
Padrão: 'out'
|
| hAxis.textStyle |
Um objeto que especifica o estilo do texto do eixo horizontal. O objeto tem este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.ticks |
Substitui as marcas do eixo X geradas automaticamente pela matriz especificada. Cada elemento da matriz deve ser um valor de marcação válido (como um número, data, data e hora ou timeofday) ou um objeto. Se for um objeto, ele precisará ter uma propriedade
A viewWindow será expandida automaticamente para
incluir as marcações mínima e máxima, a menos que você especifique um
Por exemplo:
Essa opção só é compatível com um eixo Tipo:matriz de elementos
Padrão:automático
|
| hAxis.title |
A propriedade Tipo: string
Padrão:nulo
|
| hAxis.titleTextStyle |
Um objeto que especifica o estilo de texto do título do eixo horizontal. O objeto tem este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.allowContainerBoundaryTextCutoff |
Se for falso, ocultará os rótulos mais externos em vez de permitir que eles sejam cortados pelo contêiner do gráfico. Se verdadeiro, permitirá o corte de rótulos. Essa opção só é compatível com um eixo Tipo: booleano
Padrão:false
|
| hAxis.slantedText |
Se verdadeiro, desenhe o texto do eixo horizontal em um ângulo para ajudar a encaixar mais texto ao longo do eixo. Se falso, desenhe o texto do eixo horizontal na vertical. O comportamento padrão é inclinar o texto se ele não encaixar na posição vertical. Essa opção está disponível apenas quando Tipo: booleano
Padrão:automático
|
| hAxis.slantedTextAngle |
É o ângulo do texto do eixo horizontal, se ele tiver sido desenhado inclinado. Ignorado se Tipo: número, -90–90
Padrão:30
|
| hAxis.maxAlternation |
Número máximo de níveis de texto do eixo horizontal. Se os rótulos de texto do eixo ficarem muito poluídos, o servidor poderá deslocar os rótulos vizinhos para cima ou para baixo a fim de aproximá-los. Esse valor especifica o maior número de níveis a ser usado. O servidor pode usar menos níveis, se os rótulos couberem sem se sobrepor. Para datas e horas, o padrão é 1. Tipo: número
Padrão:2
|
| hAxis.maxTextLines |
Número máximo de linhas permitidas para os rótulos de texto. Os rótulos podem abranger várias linhas se forem muito longos, e o número de linhas é, por padrão, limitado pela altura do espaço disponível. Tipo: número
Padrão:automático
|
| hAxis.minTextSpacing |
Espaçamento horizontal mínimo, em pixels, permitido entre dois rótulos de texto adjacentes. Se os rótulos forem muito densos ou muito longos, o espaçamento poderá ficar abaixo desse limite e, nesse caso, uma das medidas de organização de rótulos será aplicada (por exemplo, truncando os rótulos ou descartando alguns deles). Tipo: número
Padrão:o valor de
hAxis.textStyle.fontSize |
| hAxis.showTextEvery |
Quantos rótulos de eixo horizontal serão exibidos, em que 1 significa mostrar todos os rótulos, 2 significa mostrar todos os outros rótulos e assim por diante. O padrão é tentar mostrar o maior número possível de rótulos sem sobreposição. Tipo: número
Padrão:automático
|
| hAxis.maxValue |
Move o valor máximo do eixo horizontal para o valor especificado. Ele ocorre para a direita na
maioria dos gráficos. Ignorado se for definido como um valor menor que o valor x máximo dos dados.
Essa opção só é compatível com um eixo Tipo: número
Padrão:automático
|
| hAxis.minValue |
Move o valor mínimo do eixo horizontal até o valor especificado. Ele fica para a esquerda na
maioria dos gráficos. Ignorado se for definido como um valor maior que o valor x mínimo dos dados.
Essa opção só é compatível com um eixo Tipo: número
Padrão:automático
|
| hAxis.viewWindowMode |
Especifica como dimensionar o eixo horizontal para renderizar os valores dentro da área do gráfico. Aceitamos os seguintes valores de string:
Essa opção só é compatível com um eixo Tipo: string
Padrão:equivalente a "pretty", mas
haxis.viewWindow.min e
haxis.viewWindow.max tê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, 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.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: {}
|
| 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.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.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.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 de texto do eixo vertical. O objeto tem este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.ticks |
Substitui as marcas do eixo Y geradas automaticamente pela matriz especificada. Cada elemento da matriz deve ser um valor de marcação válido (como um número, data, data e hora ou timeofday) ou um objeto. Se for um objeto, ele precisará ter uma propriedade
A viewWindow será expandida automaticamente para
incluir as marcações mínima e máxima, a menos que você especifique um
Por exemplo:
Tipo:matriz de elementos
Padrão:automático
|
| vAxis.title |
Propriedade Tipo: string
Padrão:sem título
|
| vAxis.titleTextStyle |
Um objeto que especifica o estilo de texto do título do eixo vertical. O objeto tem este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.maxValue |
Move o valor máximo do eixo vertical até o valor especificado. Na maioria dos gráficos, esse valor é crescente. Ignorado se estiver definido como um valor menor que o valor y máximo dos dados.
Tipo: número
Padrão:automático
|
| vAxis.minValue |
Move o valor mínimo do eixo vertical até o valor especificado. Na maioria dos gráficos, esse valor é baixo. Ignorado se estiver definido como um valor maior que o valor y mínimo dos dados.
Tipo: número
Padrão:nulo
|
| vAxis.viewWindowMode |
Especifica como dimensionar o eixo vertical para renderizar os valores dentro da área do gráfico. Aceitamos os seguintes valores de string:
Tipo: string
Padrão:equivalente a "pretty", mas
vaxis.viewWindow.min e
vaxis.viewWindow.max têm precedência, se usados.
|
| vAxis.viewWindow |
Especifica o intervalo de corte do eixo vertical. Tipo: objeto
Padrão:nulo
|
| vAxis.viewWindow.max |
O valor máximo dos dados verticais a serem renderizados. Ignorado quando Tipo: número
Padrão:automático
|
| vAxis.viewWindow.min |
O valor mínimo de dados verticais a ser renderizado. Ignorado quando Tipo: número
Padrão:automático
|
| width |
Largura do gráfico, em pixels. Tipo: número
Padrão:largura do elemento que o contém
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Desenha o gráfico. O gráfico aceita outras chamadas de método somente depois que o evento Return Type: nenhum
|
getAction(actionID) |
Retorna o objeto de ação da dica com o Tipo de retorno: objeto
|
getBoundingBox(id) |
Retorna um objeto que contém as informações de esquerda, parte superior, largura e altura do elemento
Os valores são relativos ao contêiner do gráfico. Chame essa função depois que o gráfico for desenhado. Tipo de retorno: objeto
|
getChartAreaBoundingBox() |
Retorna um objeto que contém as informações de esquerda, parte superior, largura e altura do conteúdo do gráfico (ou seja, excluindo rótulos e legendas):
Os valores são relativos ao contêiner do gráfico. Chame essa função depois que o gráfico for desenhado. Tipo de retorno: objeto
|
getChartLayoutInterface() |
Retorna um objeto que contém informações sobre o posicionamento na tela do gráfico e seus elementos. Os seguintes métodos podem ser chamados no objeto retornado:
Chame essa função depois que o gráfico for desenhado. Tipo de retorno: objeto
|
getHAxisValue(xPosition, optional_axis_index) |
Retorna o valor de dados horizontal em Exemplo: Chame essa função depois que o gráfico for desenhado. Tipo de devolução: número
|
getImageURI() |
Retorna o gráfico serializado como um URI de imagem. Chame essa função depois que o gráfico for desenhado. Consulte Como imprimir gráficos PNG. Tipo de retorno: string
|
getSelection() |
Retorna uma matriz das entidades de gráfico selecionadas.
As entidades selecionáveis são pontos, anotações, entradas de legenda e categorias.
Um ponto ou anotação corresponde a uma célula na tabela de dados, a uma entrada de legenda em uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice de coluna é nulo).
Neste gráfico, apenas uma entidade pode ser selecionada por vez.
Tipo de retorno:matriz de elementos de seleção
|
getVAxisValue(yPosition, optional_axis_index) |
Retorna o valor de dados vertical em Exemplo: Chame essa função depois que o gráfico for desenhado. Tipo de devolução: número
|
getXLocation(dataValue, optional_axis_index) |
Retorna a coordenada x do pixel de Exemplo: Chame essa função depois que o gráfico for desenhado. Tipo de devolução: número
|
getYLocation(dataValue, optional_axis_index) |
Retorna a coordenada y do pixel de Exemplo: Chame essa função depois que o gráfico for desenhado. Tipo de devolução: número
|
removeAction(actionID) |
Remove a ação da dica com o Tipo de devolução:
none |
setAction(action) |
Define uma ação de dica a ser executada quando o usuário clica no texto de ação.
O método
Todas as ações de dica precisam ser definidas antes de chamar o método Tipo de devolução:
none |
setSelection() |
Seleciona as entidades de gráfico especificadas. Cancela qualquer seleção anterior.
As entidades selecionáveis são pontos, anotações, entradas de legenda e categorias.
Um ponto ou anotação corresponde a uma célula na tabela de dados, a uma entrada de legenda em uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice de coluna é nulo).
Neste gráfico, apenas uma entidade pode ser selecionada por vez.
Return Type: nenhum
|
clearChart() |
Limpa o gráfico e libera todos os recursos alocados. Return Type: nenhum
|
Eventos
Para mais informações sobre como usar esses eventos, consulte Interatividade básica, Como lidar com eventos e Como disparar eventos.
| Nome | |
|---|---|
animationfinish |
Disparado quando a animação de transição é concluída. Properties:nenhuma
|
click |
Disparado quando o usuário clica dentro do gráfico. Pode ser usado para identificar quando o título, os elementos de dados, as entradas de legenda, os eixos, as linhas de grade ou os rótulos são clicados. Propriedades:targetID
|
error |
Disparado quando ocorre um erro ao tentar renderizar o gráfico. Properties:ID, message
|
legendpagination |
Disparado quando o usuário clica nas setas de paginação de legendas. Transmite o índice de página baseado em zero atual e o número total de páginas. Propriedades:currentPageIndex, totalPages
|
onmouseover |
Disparado quando o usuário passa o mouse sobre uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Propriedades: linha, coluna
|
onmouseout |
Disparado quando o usuário afasta o mouse de uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Propriedades: linha, coluna
|
ready |
O gráfico está pronto para chamadas de métodos externos. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método Properties:nenhuma
|
select |
Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame
Properties:nenhuma
|
Política de dados
Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.