Visão geral
Um gráfico que permite renderizar cada série como um tipo de marcador diferente da seguinte lista: linha, área, barras, velas e área em degraus.
Para atribuir um tipo de marcador padrão para a série, 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 da tabela representa um conjunto de pontos de dados com a mesma localização do eixo x.
Columns:
Coluna 0 | Coluna 1 | … | Coluna N | |
---|---|---|---|---|
Finalidade: | Valores da linha 1 | … | Valores da linha N | |
Tipo de dado: | number | … | number | |
Papel: | domínio | dados | … | dados |
Papéis de coluna opcionais: | … |
Opções de configuração
Nome | |
---|---|
destino de agregação |
Como várias seleções de dados são agrupadas em dicas:
aggregationTarget vai ser usado acoplado a 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"
|
animação.duração |
É a duração da animação em milissegundos. Para mais detalhes, consulte a documentação de animação. Tipo:número
Padrão: 0
|
animação.easing |
A função de easing aplicada à animação. As seguintes opções estão disponíveis:
Tipo: string
Padrão: "linear"
|
animação.startup |
Determina se o gráfico vai ser animado no desenho inicial. Se Tipo: booleano
Falso padrão
|
anotações.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 é compatível com gráficos de área, barra, coluna, combinação, linha e dispersão. Ela não é compatível com o gráfico de anotações. Tipo: objeto
Padrão:nulo
|
anotações.datum |
Para gráficos com suporte a
anotações,
o objeto
annotations.datum permite substituir a
escolha dos gráficos do Google para anotações fornecidas para elementos de dados
individuais (como valores exibidos com cada barra em um gráfico de
barras). Você pode controlar a cor
com annotations.datum.stem.color , o comprimento do tronco
com annotations.datum.stem.length e o estilo com annotations.datum.style .
Tipo: objeto
Padrão: a cor é "preta", o comprimento é 12 e o estilo é "ponto".
|
anotações.domínio |
Para gráficos compatíveis com anotações, o objeto
annotations.domain permite substituir a escolha de gráficos do Google para anotações fornecidas para um domínio (o maior eixo 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 do tronco
com annotations.domain.stem.length e o estilo com annotations.domain.style .
Tipo: objeto
Padrão: a cor é "preta", o comprimento é 5, e o estilo é "ponto".
|
anotações.highContrast |
Para gráficos compatíveis com
anotações,
o booleano
annotations.highContrast permite modificar a escolha dos
gráficos do Google na cor da anotação. 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
escuro na luz. Se você definir annotations.highContrast como falso e não especificar a cor da sua própria anotação, os gráficos do Google usarão a cor padrão da série para a anotação:
Tipo: booleano
Padrão:verdadeiro
|
anotações.stem |
Para gráficos compatíveis com
anotações,
o objeto
annotations.stem permite substituir
a escolha dos gráficos do Google pelo estilo da raiz. Você pode controlar a cor
com annotations.stem.color e o comprimento do tronco
com annotations.stem.length . Observe que a opção de
comprimento da base não tem efeito nas anotações com
o estilo 'line' : para anotações de datum
'line' , o comprimento da raiz é sempre o mesmo que o texto.
Para as anotações de domínio 'line' , a derivação se estende
por todo o gráfico.
Tipo: objeto
Padrão: a cor é "preta", e o comprimento é 5 para anotações do domínio e 12 para anotações de datum.
|
anotações.style |
Para gráficos com suporte a
anotações,
a opção
annotations.style permite substituir
a escolha do tipo de anotação nos Gráficos Google. Pode ser
'line' ou 'point' .
Tipo: string
Padrão: "point"
|
anotações.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 é compatível com gráficos de área, barra, coluna, combinação, linha e dispersão. Ela não é compatível com o gráfico de anotações . Tipo: objeto
Padrão:nulo
|
áreaOpacidade |
A opacidade padrão da área colorida em uma série de gráficos 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 areaOpacity na propriedade Tipo:número, 0,0 a 1,0
Padrão: 0,3
|
TitleTitleSPosition |
Onde colocar os títulos dos eixos em comparação com a área do gráfico Os valores suportados são:
Tipo: string
Padrão: "out"
|
backgroundColor |
A cor do 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"
|
Largura do grupo |
A largura de um grupo de barras, especificada em um destes formatos:
Tipo: número ou string
Padrão:
a proporção dourada,
aproximadamente 66,8%.
|
candlestick.hollowIsRising |
Se for verdadeiro, as velas crescentes parecerão ocas, e as que caírem parecerão sólidas. Caso contrário, o oposto. Tipo: booleano
Padrão:falso (será alterado para verdadeiro)
|
candlestick.fallingColor.fill |
A cor de preenchimento das velas caindo, 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 de velas caindo, como uma string de cor HTML. Tipo: string
Padrão:automático (cor da série)
|
candlestick.fallingColor.strokeWidth |
A largura do traço das velas caindo, como uma string de cor HTML. Tipo: 2
Padrão: número
|
vela.crescimentodecor.fill |
A cor de preenchimento das velas em ascensão, como uma string de cor HTML. Tipo: string
Padrão: automático (branca ou cor da série, dependendo de hollowIsRising)
|
vela.crescimentodecor.traçado |
A cor do traço de velas em ascensão, como uma string de cor HTML. Tipo: string
Padrão: automático (a cor da série ou branca, dependendo de hollowIsRising)
|
vela.crescimento.cor |
A largura do traço das velas em ascensão, como uma string de cor HTML. Tipo:número
Padrão:2
|
Área do gráfico |
Um objeto com membros para configurar a posição e o tamanho da área do gráfico (em que 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. Um número seguido por % é uma porcentagem. Exemplo: Tipo: objeto
Padrão:nulo
|
chartArea.backgroundColor |
Cor de fundo da área do gráfico. Quando usada, uma string pode ser hexadecimal (por exemplo, "#fdc") ou o nome da cor em inglês. Quando um objeto é usado, é possível
fornecer as seguintes propriedades:
Tipo:string ou objeto
Padrão: "branco"
|
gráficoArea.left |
Até onde desenhar o gráfico da borda esquerda. Tipo:número ou string
Padrão: automático
|
gráficoArea.top |
Até onde desenhar o gráfico da borda superior. Tipo: número ou string
Padrão: automático
|
gráficoArea.largura |
Largura da área do gráfico. Tipo: número ou string
Padrão: automático
|
gráficoArea.height |
Altura da área do gráfico. Tipo: número ou string
Padrão: automático
|
Cores |
As cores a serem usadas nos 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
|
crosshair |
Um objeto que contém as propriedades de cruz no 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: padrão
|
crosshair.focus |
Um objeto que contém as propriedades da mira no foco. Tipo: objeto
Padrão:padrão
|
crosshair.opacity |
A opacidade da cruz, com Tipo:número
Padrão:1.0
|
crosshair.orientation |
A orientação da mira, que pode ser "vertical" apenas para cabelos verticais, "horizontal" apenas para cabelos horizontais ou "ambos" para linhas de referência tradicionais. Tipo: string
Padrão: "ambos"
|
crosshair.selecionado |
Um objeto que contém as propriedades da mira 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"
|
Tipo de curva |
Controla a curva das linhas quando a largura da linha não é zero. Será um dos seguintes valores:
Tipo:string
Padrão: "none"
|
Opacidade dos dados |
A transparência dos pontos de dados, com 1.0 sendo completamente opaco e 0.0 totalmente transparente. Nos gráficos de dispersão, histograma, barra e coluna, 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 selecionar. O gráfico de combinação exibe os dois comportamentos, e essa opção não afeta 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 gerará "select" ou outros eventos baseados em interação (mas fará eventos prontos ou de erro) e não exibirá texto passando ou mudará de acordo com a entrada do usuário. Tipo: booleano
Padrão: verdadeiro
|
Meta de foco |
É o tipo da 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. Será um dos seguintes valores:
Na função "target" "category", a dica mostra todos os valores de categoria. Isso pode ser útil para comparar valores de séries diferentes. Tipo: string
Padrão: "datum"
|
fontSize |
O tamanho de fonte padrão, em pixels, de todo o texto do gráfico. É possível modificar isso usando propriedades para elementos específicos do gráfico. Tipo: número
Padrão: automático
|
Nome da fonte |
A fonte padrão para todo o texto no gráfico. É possível modificar isso usando propriedades para elementos específicos do gráfico. Tipo: string
Padrão: "Arial"
|
FrameIForce |
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:falso
|
híbrido |
Um objeto com membros para configurar vários elementos de eixo horizontal. Para especificar propriedades desse objeto, use a notação literal de objeto, conforme 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 do valor de referência 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 eixo de data.
No caso dos rótulos de eixo, esse é um subconjunto do conjunto de padrões de ICU (em inglês). Por exemplo,
Para os rótulos de eixo de data, é um subconjunto do
conjunto de padrões de ICU
da formatação de data. 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.
Ao calcular valores de marcação e linhas de grade, várias combinações
alternativas de todas as opções relevantes
serão consideradas, e as alternativas serão rejeitadas se os
rótulos de marcação formatados forem duplicados ou se sobrepuserem.
Portanto, especifique
Essa opção é aceita apenas para 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 propriedades desse objeto, use a notação literal de objeto, conforme mostrado aqui: {color: '#333', minSpacing: 20}
Essa opção é aceita apenas para 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 na área do gráfico.
Se você especificar um número positivo para a Tipo:número
Padrão: -1
|
hAxis.gridlines.interval |
Uma matriz de tamanhos (como valores de dados, não pixels) entre as linhas de grade adjacentes. No momento, essa opção é só para eixos numéricos, mas é análoga às opções Tipo: número entre 1 e 10, sem incluir 10.
Padrão:calculado
|
hAxis.gridlines.minSpacing |
O espaço mínimo da tela, em pixels, entre as principais linhas de grade do Hadoop.
O padrão para as principais linhas de grade é Tipo: número
Padrão:calculado
|
haxis.gridlines.multiple |
Todos os valores de grade e marcação precisam ser múltiplos do
valor dessa opção. Observe que, ao contrário dos intervalos, potências de 10 vezes os múltiplos não são consideradas.
Portanto, é possível forçar as marcações como números inteiros especificando
Tipo:número
Padrão:1
|
hAxis.gridlines.units |
Substitui o formato padrão para vários aspectos dos tipos de dados de data/hora/hora do dia quando usado com linhas de grade calculadas de acordo com o gráfico. Permite a formatação de 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*/]}, } } Mais informações podem ser encontradas em 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 é aceita apenas para um eixo
Tipo: objeto
Padrão:nulo
|
hAxis.minorGridlines.color |
A cor das linhas de grade secundárias horizontais dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão:uma combinação da linha de grade e das cores do plano de fundo
|
hAxis.minorGridlines.count |
A opção Tipo:número
Padrão: 1
|
hAxis.minorGridlines.intervalo |
A opção minorGridlines.interval é como a opção do intervalo das linhas de grade principais, mas o intervalo escolhido será sempre um divisor uniforme 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 as linhas de grade secundárias e as linhas de grade menores e maiores. O valor padrão é 1/2 do minSpacing das principais linhas de grade para escalas lineares e 1/5 o minSpacing para escalas de registro. Tipo: número
Padrão: calculado
|
hAxis.minorGridlines.multiple |
O mesmo que ocorre no Tipo:número
Padrão:1
|
hAxis.minorGridlines.units |
Substitui o formato padrão para vários aspectos de tipos de dados de data/hora/hora do dia quando usado com gráfico de grade calculado. Permite a formatação de 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*/]}, } } Mais informações podem ser encontradas em Datas e horas. Tipo: objeto
Padrão:nulo
|
hAxis.logScale |
Propriedade Essa opção só é compatível com um eixo Tipo: booleano
Padrão:falso
|
hAxis.scaleType |
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 compatíveis: "out", "in", "none". Tipo: string
Padrão: "out"
|
hAxis.textStyle |
Um objeto que especifica o estilo de 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>}
|
Marcações de relógio. |
Substitui as marcações do eixo X geradas automaticamente pela matriz especificada. Cada elemento da
matriz precisa ser um valor de marcação válido (como um número, data, data/hora ou
hora do dia) ou um objeto. Se for um objeto, ele precisa ter uma propriedade
A viewWindow será expandida automaticamente para incluir as marcações mínima e máxima, a menos que você especifique um Exemplos:
Essa opção é aceita apenas para um eixo
Tipo:matriz de elementos
Padrão: automático
|
hAxis.title |
Propriedade Tipo: string
Padrão:nulo
|
hAxis.titleTextStyle |
Um objeto que especifica o estilo do 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, os rótulos externos ficarão ocultos, em vez de permitir que sejam cortados pelo contêiner do gráfico. Se verdadeiro, permitirá o corte de rótulo. Essa opção só é compatível com um eixo Tipo: booleano
Padrão:falso
|
Texto do texto do relógio (hAxis.slantedText) |
Se for verdadeiro, desenhe o texto do eixo horizontal em um ângulo para ajudar a ajustar mais texto ao longo do eixo. Se
for falso, desenhe o texto do eixo horizontal na vertical. O comportamento padrão é inclinar o texto se ele não couber
quando for desenhado para cima. Essa opção está disponível apenas quando o
Tipo: booleano
Padrão: automático
|
hAxis.slantedTextAngle |
É o ângulo do texto do eixo horizontal, se for inclinado. Ignorado se
Tipo: número, -90–90
Padrão:30
|
hAxis.maxAlternation |
Número máximo de níveis de texto no eixo horizontal. Se os rótulos de texto dos eixos ficarem sobrecarregados, o servidor poderá deslocar os rótulos vizinhos para cima ou para baixo e, assim, ajustar os rótulos mais próximos. Esse valor especifica o maior número de níveis a ser usado. O servidor poderá usar menos níveis se os rótulos puderem ser ajustados sem sobreposição. Para datas e horas, o padrão é 1. Tipo:número
Padrão:2
|
hAxis.maxTextLines |
Número máximo de linhas permitido para os rótulos de texto. Os rótulos podem abranger várias linhas se forem muito longos, e o número de linhas for, por padrão, limitado pela altura do espaço disponível. Tipo: número
Padrão:automático
|
hAxis.minTextSpacing |
Espaçamento mínimo (em pixels) permitido entre dois rótulos de texto adjacentes. Se os rótulos forem muito espaçados ou muito longos, o espaçamento poderá cair abaixo desse limite e, nesse caso, uma das medidas de organização será aplicada (por exemplo, truncando os rótulos ou soltando alguns deles). Tipo: número
Padrão:o valor de
hAxis.textStyle.fontSize |
hAxis.showTextEvery |
Quantos rótulos de eixo horizontal serão mostrados, em que 1 significa para mostrar todos os rótulos, 2 para mostrar todos os outros rótulos e assim por diante. O padrão é tentar mostrar o máximo 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 será direcionado para a direita na maioria dos gráficos. Será ignorado se esse valor for menor que o valor máximo de x dos dados.
Essa opção é aceita apenas para um eixo
Tipo:número
Padrão:automático
|
hAxis.minValue |
Move o valor mínimo do eixo horizontal para o valor especificado. Esse valor será deixado para a esquerda na maioria dos gráficos. Será ignorado se esse valor for maior que o valor x mínimo dos dados.
Essa opção é aceita apenas para um eixo
Tipo: número
Padrão: automático
|
hAxis.viewWindowMode |
Especifica como dimensionar o eixo horizontal para renderizar os valores na área do gráfico. Os seguintes valores de string são compatíveis:
Essa opção é aceita apenas para um eixo
Tipo: string
Padrão:equivalente a "pretinho", 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
|
altura |
Altura do gráfico, em pixels. Tipo:número
Padrão:altura do elemento em questão
|
interpolateNulls |
Indica se o valor dos pontos ausentes precisa ser identificado. Se for verdadeiro, ele adivinhará o valor dos dados ausentes com base nos pontos vizinhos. Se for falso, ele vai deixar uma quebra na linha no ponto desconhecido.
Isso não é compatível com gráficos
Área com a
opção Tipo: booleano
Padrão: falso
|
empilhado |
Se definido como verdadeiro, os elementos da série do mesmo tipo serão empilhados. Afeta somente séries de barras, colunas e áreas. Tipo: booleano
Padrão:falso
|
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, conforme mostrado aqui: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Tipo: objeto
Padrão: nulo
|
legenda.alinhamento |
Alinhamento da legenda. Será um dos seguintes valores:
O início, o centro e o fim são relativos ao estilo (vertical ou horizontal) da legenda. Por exemplo, em uma legenda "direita", "início" e "fim" estão na parte superior e inferior, respectivamente. Para uma legenda "superior", "início" e "fim" estariam à esquerda e à direita da área, respectivamente. O valor padrão depende da posição da legenda. Para legendas "inferior", o padrão é "center", outras legendas padrão são "start". Tipo: string
Padrão: automático
|
legenda.maxLines |
Número máximo de linhas na legenda. Defina um número maior do 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 é "top". Tipo:número
Padrão:1
|
legenda.pagina |
Índice inicial selecionado da página com base em zero da legenda. Tipo:número
Padrão: 0
|
legenda.posição |
Posição da legenda. Será um dos seguintes valores:
Tipo: string
Padrão: "right"
|
legenda.Estilodetexto |
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>}
|
Estilo da linha |
O padrão ativado e desativado de linhas tracejadas. Por exemplo, Tipo: matriz de números
Padrão:nulo
|
Largura da linha |
Largura da linha de dados em pixels. Use zero para ocultar todas as linhas e mostrar apenas os pontos. É possível
substituir os valores de séries individuais usando a propriedade Tipo: número
Padrão:2
|
orientação |
A orientação do gráfico. Quando definido como Tipo: string
Padrão: "horizontal"
|
Forma de ponto |
O formato dos elementos individuais de dados: 'círculo', 'triângulo', 'quadrado', 'diamante', 'estrela' ou 'polígono'. Consulte a documentação de pontos para ver exemplos. Tipo: string
Padrão: 'círculo'
|
tamanho do ponto |
Diâmetro dos pontos exibidos em pixels. Use zero para ocultar todos os pontos. É possível substituir os valores de séries individuais usando a propriedade Tipo:número
Padrão:0
|
pontos visíveis |
Determina se os pontos são exibidos. Defina como
Isso também pode ser substituído usando o papel de estilo na forma de Tipo: booleano
Padrão: verdadeiro
|
categorias inversas |
Se definida como verdadeira, a série será desenhada da direita para a esquerda. O padrão é desenhar da esquerda para a direita.
Essa opção é compatível apenas com um eixo
Tipo: booleano
Padrão: falso
|
Modo de seleção |
Quando Tipo: string
Padrão: "single"
|
Série |
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 oferece suporte às seguintes propriedades:
É possível especificar uma matriz de objetos, sendo que cada uma delas se aplica à série na ordem fornecida, ou especificar um objeto em que cada filho tem uma chave numérica indicando a qual série ela 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 objetos com objetos aninhados
Padrão: {}
|
TipoDeSérie |
O tipo de linha padrão de qualquer série não especificada na propriedade Tipo: string
Padrão: "line"
|
tema |
Um tema é um conjunto de valores de opção predefinidos que funcionam juntos para alcançar um comportamento ou efeito visual específico. Atualmente, apenas um tema está disponível:
Tipo: string
Padrão: nulo
|
title |
Texto a ser exibido acima do gráfico. Tipo: string
Padrão:sem título
|
Posição do título |
Onde colocar o título do gráfico, em comparação com a área do gráfico. Os valores suportados são:
Tipo: string
Padrão: "out"
|
TítulodoEstiloEstilo |
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, conforme mostrado aqui: {textStyle: {color: '#FF0000'}, showColorCode: true} Tipo: objeto
Padrão:nulo
|
tooltip.ignoreBounds |
Se definido como Observação: isso se aplica somente a dicas de HTML. Se ele estiver ativado com dicas de ferramentas SVG, qualquer estouro fora dos limites do gráfico será cortado. Consulte Como personalizar o conteúdo de dicas para mais detalhes. Tipo: booleano
Padrão:falso
|
tooltip.isHTML |
Se definida como verdadeira, use dicas renderizadas por HTML (em vez de renderizadas por SVG). Consulte Como personalizar o conteúdo de dicas para mais detalhes. Observação: a personalização do conteúdo da dica de HTML por meio do papel de dados da coluna de dica de ferramenta não é aceita pela visualização Gráfico de bolhas. Tipo: booleano
Padrão:falso
|
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"
|
Axx |
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 uma com um rótulo numérico que especifica o eixo que define. Esse é 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
|
Eixo |
Um objeto com membros para configurar vários elementos de eixo vertical. Para especificar as propriedades desse objeto, use a notação literal de objeto, conforme 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 do valor de referência do 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 mais baixos ficam na parte inferior do gráfico. Especifique Tipo: 1 ou -1
Padrão:1
|
vAxis.format |
Uma string de formato para rótulos de eixo numérico. 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.
Ao calcular valores de marcação e linhas de grade, várias combinações
alternativas de todas as opções relevantes
serão consideradas, e as alternativas serão rejeitadas se os
rótulos de marcação formatados forem duplicados ou se sobrepuserem.
Portanto, especifique 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 propriedades desse objeto, use a notação literal de objeto, conforme 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 na área do gráfico.
Se você especificar um número positivo para a Tipo:número
Padrão: -1
|
vAxis.gridlines.interval |
Uma matriz de tamanhos (como valores de dados, não pixels) entre as linhas de grade adjacentes. No momento, essa opção é só para eixos numéricos, mas é análoga às opções Tipo:número entre 1 e 10, sem incluir 10.
Padrão: calculado
|
vAxis.gridlines.minSpacing |
O espaço mínimo da tela, em pixels, entre as principais linhas de grade do Hadoop.
O padrão para as principais linhas de grade é Tipo: número
Padrão: calculado
|
vAxis.gridlines.multiple |
Todos os valores de grade e marcação precisam ser múltiplos do
valor dessa opção. Observe que, ao contrário dos intervalos, potências de 10 vezes os múltiplos não são consideradas.
Portanto, é possível forçar as marcações como números inteiros especificando
Tipo:número
Padrão: 1
|
vAxis.gridlines.units |
Substitui o formato padrão para vários aspectos dos tipos de dados de data/hora/hora do dia quando usado com linhas de grade calculadas de acordo com o gráfico. Permite a formatação de 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*/]} } } Mais informações podem ser encontradas em 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 pequenas linhas de grade verticais dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão:uma combinação da linha de grade e das cores do plano de fundo
|
vAxis.minorGridlines.count |
O uso da opção minorGridlines.count foi descontinuado, exceto pela desativação de linhas de grade menores, definindo a contagem como 0. O número de linhas de grade secundárias depende do intervalo entre as linhas de grade principais (consulte vAxis.gridlines.interval) e o espaço mínimo necessário (consulte vAxis.minorGridlines.minSpacing). Tipo: número
Padrão: 1
|
vAxis.minorGridlines.intervalo |
A opção minorGridlines.interval é como a opção do intervalo das linhas de grade principais, mas o intervalo escolhido será sempre um divisor uniforme 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 as linhas de grade secundárias e as linhas de grade menores e maiores. O valor padrão é 1/2 do minSpacing das principais linhas de grade para escalas lineares e 1/5 o minSpacing para escalas de registro. Tipo: número
Padrão: calculado
|
vAxis.minorGridlines.multiple |
O mesmo que ocorre no Tipo:número
Padrão:1
|
vAxis.minorGridlines.units |
Substitui o formato padrão para vários aspectos de tipos de dados de data/hora/hora do dia quando usado com gráfico de grade calculado. Permite a formatação de 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*/]}, } } Mais informações podem ser encontradas em Datas e horas. Tipo: objeto
Padrão: nulo
|
vAxis.logScale |
Se for verdadeiro, torna o eixo vertical uma escala logarítmica. Observação: todos os valores precisam ser positivos. Tipo: booleano
Padrão: falso
|
vAxis.scaleType |
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 compatíveis: "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>}
|
Marcas de vídeo. |
Substitui as marcações do eixo Y geradas automaticamente pela matriz especificada. Cada elemento da
matriz precisa ser um valor de marcação válido (como um número, data, data/hora ou
hora do dia) 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 Exemplos:
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 do 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 para o valor especificado; isso será crescente na maioria dos gráficos. Será ignorado se esse valor for 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 para o valor especificado. Esse valor será decrescente na maioria dos gráficos. Será ignorado se esse valor for 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 na área do gráfico. Os seguintes valores de string são compatíveis:
Tipo: string
Padrão:
equivalente a "pretinho", 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 de dados verticais para renderização. Ignorado quando Tipo:número
Padrão:automático
|
vAxis.viewWindow.min |
O valor mínimo de dados verticais para renderização. Ignorado quando Tipo:número
Padrão:automático
|
largura |
Largura do gráfico, em pixels. Tipo:número
Padrão: largura do elemento contido
|
Métodos
Método | |
---|---|
draw(data, options) |
Desenha o gráfico. O gráfico aceita mais chamadas de método somente após o evento Tipo de retorno: nenhum
|
getAction(actionID) |
Retorna o objeto de ação da dica com a Return Type: objeto
|
getBoundingBox(id) |
Retorna um objeto que contém os elementos esquerdo, superior, largura e altura do elemento do gráfico
Os valores são relativos ao contêiner do gráfico. Chame essa função após o gráfico ser desenhado. Return Type: objeto
|
getChartAreaBoundingBox() |
Retorna um objeto que contém o lado esquerdo, o topo, a largura e a altura do conteúdo do gráfico (ou seja, excluir rótulos e legendas):
Os valores são relativos ao contêiner do gráfico. Chame essa função após o gráfico ser desenhado. Return Type: objeto
|
getChartLayoutInterface() |
Retorna um objeto que contém informações sobre o posicionamento na tela do gráfico e os elementos dele. Os seguintes métodos podem ser chamados no objeto retornado:
Chame essa função após o gráfico ser desenhado. Return Type: objeto
|
getHAxisValue(xPosition, optional_axis_index) |
Retorna o valor de dados horizontal em Exemplo: Chame essa função após o gráfico ser desenhado. Tipo de retorno:número
|
getImageURI() |
Retorna o gráfico serializado como um URI de imagem. Chame essa função após o gráfico ser desenhado. Consulte Como imprimir gráficos PNG. Tipo de retorno: string
|
getSelection() |
Retorna uma matriz das entidades do gráfico selecionadas.
As entidades selecionáveis são pontos, barras, etapas, anotações, entradas de legenda e categorias.
Um ponto, uma barra, uma etapa ou uma anotação corresponde a uma célula da tabela de dados,
a uma entrada de legenda em uma coluna (o índice da linha é nulo) e em uma categoria a uma linha (o índice da coluna é nulo).
Nesse 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 verticais em Exemplo: Chame essa função após o gráfico ser desenhado. Tipo de retorno: número
|
getXLocation(dataValue, optional_axis_index) |
Retorna a coordenada X de pixel de Exemplo: Chame essa função após o gráfico ser desenhado. Tipo de retorno: número
|
getYLocation(dataValue, optional_axis_index) |
Retorna a coordenada y de pixel de Exemplo: Chame essa função após o gráfico ser desenhado. Tipo de retorno:número
|
removeAction(actionID) |
Remove a ação de dica com a Tipo de retorno:
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
Toda e qualquer ação de dica precisa ser definida antes de chamar o método Tipo de retorno:
none |
setSelection() |
Seleciona as entidades do 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, uma barra, uma etapa ou uma anotação corresponde a uma célula da tabela de dados,
a uma entrada de legenda em uma coluna (o índice da linha é nulo) e em uma categoria a uma linha (o índice da coluna é nulo).
Somente uma entidade pode ser selecionada por vez para este gráfico.
Tipo de retorno:nenhum
|
clearChart() |
Limpa o gráfico e libera todos os recursos alocados. Tipo de retorno: nenhum
|
Eventos
Para mais informações sobre como usar esses eventos, consulte Interatividade básica, Como lidar com eventos e Eventos de disparo.
Nome | |
---|---|
animationfinish |
Disparado quando a animação de transição é concluída. Propriedades: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 legendas, 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. Propriedades:ID e mensagem
|
legendpagination |
Disparado quando o usuário clica nas setas de paginação de legenda. Retorna o índice de páginas atual com base em zero 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 passa o mouse sobre uma entidade visual. Retorna 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étodo externo. 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 Propriedades: nenhuma
|
select |
Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame
Propriedades:nenhuma
|
Política de dados
Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.