Visão geral
Um gráfico de área em degraus que é renderizado no navegador usando SVG ou VML. Mostra dicas ao passar o cursor sobre as etapas.
Um exemplo simples
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Director (Year)', 'Rotten Tomatoes', 'IMDB'], ['Alfred Hitchcock (1935)', 8.4, 7.9], ['Ralph Thomas (1959)', 6.9, 6.5], ['Don Sharp (1978)', 6.5, 6.4], ['James Hawes (2008)', 4.4, 6.2] ]); var options = { title: 'The decline of \'The 39 Steps\'', vAxis: {title: 'Accumulated Rating'}, isStacked: true }; var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Algumas opções comuns
Como todos os gráficos do Google, os gráficos de área em degraus têm muitas opções, mostradas aqui. Aqui está um exemplo demonstrando algumas das mais comuns:
No gráfico acima, mudamos a cor do plano de fundo com backgroundColor
, movemos a legenda para a parte inferior com legend.position
, removemos as linhas verticais definindo connectSteps
como falso e personalizamos as cores. Veja como isso foi feito:
var options = { backgroundColor: '#ddd', legend: { position: 'bottom' }, connectSteps: false, colors: ['#4374E0', '#53A8FB', '#F1CA3A', '#E49307'], isStacked: true, };
Gráficos de áreas em degraus empilhadas
Os gráficos de área em degraus também têm suporte para empilhamento, incluindo 100% de empilhamento. Um gráfico de áreas empilhadas em degraus é de área em degraus que coloca valores relacionados uns sobre os outros. Se houver valores negativos, eles serão empilhados em ordem inversa abaixo do valor de referência do gráfico. Para 100% de empilhamento, as pilhas de elementos em cada valor de domínio são redimensionadas de modo que
somem 100%. As opções para isso são isStacked: 'percent'
, que formata cada valor como uma porcentagem de 100%, e isStacked: 'relative'
, que formata cada valor como uma fração de 1. Há também uma opção isStacked: 'absolute'
, que é funcionalmente equivalente a isStacked: true
.
No gráfico 100% empilhado à direita, os valores de marcação são escritos com base na escala relativa de 0 a 1 como frações de 1.
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, vAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'relative', height: 300, legend: {position: 'top', maxLines: 3}, vAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
Carregando
O nome do pacote google.charts.load
é "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
O nome da classe da visualização é google.visualization.SteppedAreaChart
.
var visualization = new google.visualization.SteppedAreaChart(container);
Formato de dados
Linhas:cada linha na tabela representa um grupo de barras.
Columns:
Coluna 0 | Coluna 1 | ... | Coluna N | |
---|---|---|---|---|
Finalidade: | Rótulos de grupo do eixo X | Valores da barra 1 neste grupo | ... | Barra N valores neste grupo |
Tipo de dados: | string | number | ... | number |
Role: | domínio | dados | ... | dados |
Papéis de coluna opcionais: | ... |
Opções de configuração
Nome | |
---|---|
aggregationTarget |
Como várias seleções de dados são agrupadas em dicas:
O
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"
|
areaOpacity |
A opacidade padrão da área abaixo da etapa, em que 0.0 é totalmente transparente e 1.0 é totalmente opaco. Isso não afeta a opacidade da linha em degraus. Para criar um gráfico de linhas em degraus, defina esse valor como 0. Para especificar a opacidade de uma série individual, defina o valor Tipo: número, 0,0–1,0
Padrão:0,3
|
axisTitlesPosition |
Onde posicionar os títulos dos eixos em comparação com a área do gráfico. Valores compatíveis:
Tipo: string
Padrão: 'out'
|
backgroundColor |
A cor de plano de fundo da área principal do gráfico. Pode ser uma string de cor HTML simples,
por exemplo: Tipo:string ou objeto
Padrão: "branco"
|
backgroundColor.stroke |
A cor da borda do gráfico, como uma string de cor HTML. Tipo: string
Padrão: "#666"
|
backgroundColor.strokeWidth |
A largura da borda, em pixels. Tipo: número
Padrão:0
|
backgroundColor.fill |
A cor de preenchimento do gráfico, como uma string de cor HTML. Tipo: string
Padrão: "branco"
|
chartArea |
Um objeto com membros para configurar o posicionamento e o tamanho da área do gráfico (onde o próprio gráfico é desenhado, excluindo eixo e legendas). Dois formatos são compatíveis: um número ou um número seguido por %. Um número simples é um valor em pixels, enquanto um número seguido por % é uma porcentagem. Exemplo: Tipo: objeto
Padrão:nulo
|
chartArea.backgroundColor |
Cor de fundo da área do gráfico. Quando uma string é usada, ela pode ser hexadecimal (por exemplo, '#fdc') ou o nome de uma cor em inglês. Quando um objeto é usado, as seguintes propriedades podem ser fornecidas:
Tipo:string ou objeto
Padrão: "branco"
|
chartArea.left |
A distância da borda esquerda a desenhar o gráfico. Tipo:número ou string
Padrão:automático
|
chartArea.top |
Indica a distância entre a borda superior e o gráfico a partir da borda superior. Tipo:número ou string
Padrão:automático
|
chartArea.width |
Largura da área do gráfico. Tipo:número ou string
Padrão:automático
|
chartArea.height |
Altura da área do gráfico. Tipo:número ou string
Padrão:automático
|
cores |
As cores a serem usadas para os elementos do gráfico. Uma matriz de strings, em que cada elemento é uma string de cor HTML, por exemplo: Tipo:matriz de strings
Padrão:cores padrão
|
connectSteps |
Se definida como verdadeira, conectará as etapas para formar uma linha em degraus. Caso contrário, apenas uma linha superior será exibida. O padrão é conectar as etapas. Tipo: booleano
Padrão:true
|
enableInteractivity |
Se o gráfico gera eventos com base no usuário ou reage à interação do usuário. Se for falso, o gráfico não vai gerar "select" ou outros eventos baseados em interação (mas vai gerar eventos prontos ou de erro) e não vai mostrar texto de passar o cursor nem mudar de acordo com a entrada do usuário. Tipo: booleano
Padrão:true
|
focusTarget |
O tipo de entidade que recebe o foco ao passar o cursor. Também afeta qual entidade é selecionada pelo clique do mouse e qual elemento da tabela de dados está associado aos eventos. Pode ser uma das seguintes opções:
Em FocusTarget 'category', a dica de ferramenta mostra todos os valores da categoria. Isso pode ser útil para comparar valores de séries diferentes. Tipo: string
Padrão: 'datum'
|
fontSize |
O tamanho da fonte padrão, em pixels, de todo o texto no gráfico. É possível modificar isso usando propriedades de elementos específicos do gráfico. Tipo: número
Padrão:automático
|
fontName |
O tipo de fonte padrão para todo o texto no gráfico. É possível modificar isso usando propriedades de elementos específicos do gráfico. Tipo: string
Padrão: "Arial"
|
forceIFrame |
Desenha o gráfico dentro de um frame inline. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames. Tipo: booleano
Padrão:false
|
hAxis |
Um objeto com membros para configurar vários elementos do eixo horizontal. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Tipo: objeto
Padrão:nulo
|
hAxis.direction |
A direção em que os valores ao longo do eixo horizontal crescem. Especifique Tipo:1 ou -1
Padrão: 1
|
hAxis.textPosition |
Posição do texto do eixo horizontal em relação à área do gráfico. Valores aceitos: 'out', 'in', 'none'. Tipo: string
Padrão: 'out'
|
hAxis.textStyle |
Um objeto que especifica o estilo do texto do eixo horizontal. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.ticks |
Substitui as marcas do eixo X geradas automaticamente pela matriz especificada. Cada elemento da matriz deve ser um valor de marcação válido (como um número, data, data e hora ou timeofday) ou um objeto. Se for um objeto, ele precisará ter uma propriedade
A viewWindow será expandida automaticamente para
incluir as marcações mínima e máxima, a menos que você especifique um
Por exemplo:
Tipo:matriz de elementos
Padrão:automático
|
hAxis.title |
A propriedade Tipo: string
Padrão:nulo
|
hAxis.titleTextStyle |
Um objeto que especifica o estilo de texto do título do eixo horizontal. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.allowContainerBoundaryTextCutoff |
Se for falso, ocultará os rótulos mais externos em vez de permitir que eles sejam cortados pelo contêiner do gráfico. Se verdadeiro, permitirá o corte de rótulos. Tipo: booleano
Padrão:false
|
hAxis.slantedText |
Se verdadeiro, desenhe o texto do eixo horizontal em um ângulo para ajudar a encaixar mais texto ao longo do eixo. Se falso, desenhe o texto do eixo horizontal na vertical. O comportamento padrão é inclinar o texto se ele não encaixar na posição vertical. Essa opção está disponível apenas quando Tipo: booleano
Padrão:automático
|
hAxis.slantedTextAngle |
É o ângulo do texto do eixo horizontal, se ele tiver sido desenhado inclinado. Ignorado se Tipo: número, -90–90
Padrão:30
|
hAxis.maxAlternation |
Número máximo de níveis de texto do eixo horizontal. Se os rótulos de texto do eixo ficarem muito poluídos, o servidor poderá deslocar os rótulos vizinhos para cima ou para baixo a fim de aproximá-los. Esse valor especifica o maior número de níveis a ser usado. O servidor pode usar menos níveis, se os rótulos couberem sem se sobrepor. Para datas e horas, o padrão é 1. Tipo: número
Padrão:2
|
hAxis.maxTextLines |
Número máximo de linhas permitidas para os rótulos de texto. Os rótulos podem abranger várias linhas se forem muito longos, e o número de linhas é, por padrão, limitado pela altura do espaço disponível. Tipo: número
Padrão:automático
|
hAxis.minTextSpacing |
Espaçamento horizontal mínimo, em pixels, permitido entre dois rótulos de texto adjacentes. Se os rótulos forem muito densos ou muito longos, o espaçamento poderá ficar abaixo desse limite e, nesse caso, uma das medidas de organização de rótulos será aplicada (por exemplo, truncando os rótulos ou descartando alguns deles). Tipo: número
Padrão:o valor de
hAxis.textStyle.fontSize |
hAxis.showTextEvery |
Quantos rótulos de eixo horizontal serão exibidos, em que 1 significa mostrar todos os rótulos, 2 significa mostrar todos os outros rótulos e assim por diante. O padrão é tentar mostrar o maior número possível de rótulos sem sobreposição. Tipo: número
Padrão:automático
|
hAxis.viewWindow |
Especifica o intervalo de corte do eixo horizontal. Tipo: objeto
Padrão:nulo
|
hAxis.viewWindow.max |
O índice de linha baseado em zero em que a janela de corte termina. Os pontos de dados neste índice e
em valores superiores serão cortados. Em conjunto com Ignorado quando Tipo: número
Padrão:automático
|
hAxis.viewWindow.min |
O índice de linha baseado em zero em que a janela de corte começa. Os pontos de dados em índices inferiores
a esse serão cortados. Em conjunto com Ignorado quando Tipo: número
Padrão:automático
|
height |
Altura do gráfico, em pixels. Tipo: número
Padrão:altura do elemento contêiner
|
isStacked |
Se definido como verdadeiro, empilha os elementos de todas as séries em cada valor de domínio. Observação:nos gráficos de Coluna, Área e SteppedArea, o Google Charts inverte a ordem dos itens de legenda para que eles correspondam melhor ao empilhamento dos elementos da série (por exemplo, a série 0 será o item de legenda na parte de baixo). Isso não se aplica a gráficos de barras.
A opção As opções para
Para o empilhamento 100%, o valor calculado de cada elemento vai aparecer na dica após o valor real.
Por padrão, o eixo de destino exibirá valores de marcação com base na escala relativa de 0 a 1 como frações de 1 para
O empilhamento 100% só oferece suporte a valores de dados do tipo Tipo: booleano/string
Padrão:false
|
lenda |
Um objeto com membros para configurar vários aspectos da legenda. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Tipo: objeto
Padrão:nulo
|
legend.alignment |
Alinhamento da legenda. Será um dos seguintes valores:
Início, centro e fim são relativos ao estilo (vertical ou horizontal) da legenda. Por exemplo, em uma legenda de "direita", "início" e "fim" estão na parte de cima e de baixo, respectivamente. Para uma legenda de "topo", "início" e "fim" estariam à esquerda e à direita da área, respectivamente. O valor padrão depende da posição da legenda. Para legendas "bottom", o padrão é "center". Outras legendas têm como padrão "start". Tipo: string
Padrão:automático
|
legend.maxLines |
Número máximo de linhas na legenda. Defina como um número maior que um para adicionar linhas à legenda. Observação: a lógica exata usada para determinar o número real de linhas renderizadas ainda está em fluxo. No momento, essa opção funciona apenas quando caption.position é "topo". Tipo: número
Padrão: 1
|
legend.position |
Posição da legenda. Será um dos seguintes valores:
Tipo: string
Padrão: "right"
|
legend.textStyle |
Um objeto que especifica o estilo do texto da legenda. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
lineDashStyle |
O padrão ativado e desativado para linhas tracejadas. Por exemplo, Tipo:matriz de números
Padrão:nulo
|
reverseCategories |
Se definida como verdadeira, desenhará séries da direita para a esquerda. O padrão é desenhar da esquerda para a direita. Tipo: booleano
Padrão:false
|
selectionMode |
Quando Tipo: string
Padrão: "single"
|
séries |
Uma matriz de objetos, cada um descrevendo o formato da série correspondente no gráfico. Para usar valores padrão para uma série, especifique um objeto vazio {}. Se uma série ou um valor não for especificado, o valor global será usado. Cada objeto suporta as seguintes propriedades:
É possível especificar uma matriz de objetos, cada um aplicável à série na ordem determinada, ou especificar um objeto em que cada filho tenha uma chave numérica que indica a qual série ele se aplica. Por exemplo, as duas declarações a seguir são idênticas e declaram a primeira série como preta e ausente da legenda, e a quarta como vermelha e ausente da legenda: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Tipo:matriz de objetos ou objeto com objetos aninhados
Padrão: {}
|
tema |
Um tema é um conjunto de valores de opções predefinidos que trabalham juntos para atingir um comportamento ou efeito visual específico de gráfico. No momento, apenas um tema está disponível:
Tipo: string
Padrão:nulo
|
título |
Texto a ser exibido acima do gráfico. Tipo: string
Padrão:sem título
|
titlePosition |
Onde colocar o título do gráfico em comparação com a área do gráfico. Valores compatíveis:
Tipo: string
Padrão: 'out'
|
titleTextStyle |
Um objeto que especifica o estilo do texto do título. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
dica |
Um objeto com membros para configurar vários elementos de dica. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {textStyle: {color: '#FF0000'}, showColorCode: true} Tipo: objeto
Padrão:nulo
|
tooltip.ignoreBounds |
Se definido como Observação:isso se aplica apenas a dicas de HTML. Se essa opção for ativada com dicas de SVG, qualquer estouro fora dos limites do gráfico será cortado. Consulte Como personalizar o conteúdo da dica para mais detalhes. Tipo: booleano
Padrão:false
|
tooltip.isHtml |
Se definida como verdadeira, use dicas renderizadas em HTML (em vez de renderizadas em SVG). Consulte Como personalizar o conteúdo da dica para mais detalhes. Observação:a personalização do conteúdo da dica HTML pelo papel de dados da coluna de dicas não é compatível com a visualização do gráfico de bolhas. Tipo: booleano
Padrão:false
|
tooltip.showColorCode |
Se verdadeiro, mostra quadrados coloridos ao lado das informações da série na dica. O padrão é
verdadeiro quando Tipo: booleano
Padrão:automático
|
tooltip.textStyle |
Um objeto que especifica o estilo do texto da dica. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
A interação do usuário que faz com que a dica seja exibida:
Tipo: string
Padrão: "focus"
|
vAxes |
Especifica propriedades para eixos verticais individuais, se o gráfico tiver vários eixos verticais.
Cada objeto filho é um objeto
Para especificar um gráfico com vários eixos verticais, primeiro defina um novo eixo usando { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
Essa propriedade pode ser um objeto ou uma matriz: o objeto é uma coleção de objetos, cada um com um rótulo numérico que especifica o eixo definido. Este é o formato mostrado acima; a matriz é uma matriz de objetos, um por eixo. Por exemplo, a seguinte notação de estilo de matriz é idêntica ao objeto vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Tipo: matriz de objeto ou objeto com objetos filhos
Padrão:nulo
|
vAxis |
Um objeto com membros para configurar vários elementos do eixo vertical. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Tipo: objeto
Padrão:nulo
|
vAxis.baseline |
Propriedade Tipo: número
Padrão:automático
|
vAxis.baselineColor |
Especifica a cor da linha de base para o eixo vertical. Pode ser qualquer string de cor HTML, por
exemplo: Tipo: número
Padrão: "preto"
|
vAxis.direction |
A direção em que os valores ao longo do eixo vertical crescem. Por padrão, os valores baixos ficam na parte inferior do gráfico. Especifique Tipo:1 ou -1
Padrão: 1
|
vAxis.format |
Uma string de formato para os rótulos dos eixos numéricos. Esse é um subconjunto do
conjunto de padrões de ICU
.
Por exemplo,
A formatação real aplicada ao rótulo é derivada da localidade com que a API foi carregada. Para mais detalhes, consulte Como carregar gráficos com uma localidade específica .
No cálculo de valores de marcação e linhas de grade, várias combinações alternativas de todas as opções de linha de grade relevantes serão consideradas, e alternativas serão rejeitadas se os rótulos de marcação formatados forem duplicados ou sobrepostos.
Portanto, você pode especificar Tipo: string
Padrão:automático
|
vAxis.gridlines |
Um objeto com membros para configurar as linhas de grade no eixo vertical. As linhas de grade do eixo vertical são desenhadas horizontalmente. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {color: '#333', minSpacing: 20} Tipo: objeto
Padrão:nulo
|
vAxis.gridlines.color |
A cor das linhas de grade verticais dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão: "#CCC"
|
vAxis.gridlines.count |
O número aproximado de linhas de grade horizontais dentro da área do gráfico.
Se você especificar um número positivo para Tipo: número
Padrão: -1
|
vAxis.minorGridlines |
Um objeto com membros para configurar as linhas de grade secundárias no eixo vertical, semelhante à opção vAxis.gridlines. Tipo: objeto
Padrão:nulo
|
vAxis.minorGridlines.color |
A cor das linhas de grade verticais menores dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão:uma mistura das cores de linha de grade e de plano de fundo
|
vAxis.minorGridlines.count |
A opção menosGridlines.count está obsoleta, exceto para desativar linhas de grade secundárias ao definir a contagem como 0. O número de linhas de grade secundárias depende do intervalo entre as principais linhas de grade (consulte vAxis.gridlines.interval) e o espaço mínimo necessário (consulte vAxis.minorGridlines.minSpacing). Tipo: número
Padrão: 1
|
vAxis.logScale |
Se verdadeiro, transforma o eixo vertical em uma escala logarítmica. Observação: todos os valores precisam ser positivos. Tipo: booleano
Padrão:false
|
vAxis.scaleType |
A propriedade
Tipo: string
Padrão:nulo
|
vAxis.textPosition |
Posição do texto do eixo vertical em relação à área do gráfico. Valores aceitos: 'out', 'in', 'none'. Tipo: string
Padrão: 'out'
|
vAxis.textStyle |
Um objeto que especifica o estilo de texto do eixo vertical. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
Substitui as marcas do eixo Y geradas automaticamente pela matriz especificada. Cada elemento da matriz deve ser um valor de marcação válido (como um número, data, data e hora ou timeofday) ou um objeto. Se for um objeto, ele precisará ter uma propriedade
A viewWindow será expandida automaticamente para
incluir as marcações mínima e máxima, a menos que você especifique um
Por exemplo:
Tipo:matriz de elementos
Padrão:automático
|
vAxis.title |
Propriedade Tipo: string
Padrão:sem título
|
vAxis.titleTextStyle |
Um objeto que especifica o estilo de texto do título do eixo vertical. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
Move o valor máximo do eixo vertical até o valor especificado. Na maioria dos gráficos, esse valor é crescente. Ignorado se estiver definido como um valor menor que o valor y máximo dos dados.
Tipo: número
Padrão:automático
|
vAxis.minValue |
Move o valor mínimo do eixo vertical até o valor especificado. Na maioria dos gráficos, esse valor é baixo. Ignorado se estiver definido como um valor maior que o valor y mínimo dos dados.
Tipo: número
Padrão:nulo
|
vAxis.viewWindowMode |
Especifica como dimensionar o eixo vertical para renderizar os valores dentro da área do gráfico. Aceitamos os seguintes valores de string:
Tipo: string
Padrão:equivalente a "pretty", mas
vaxis.viewWindow.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 etapas, entradas de legenda e categorias.
Uma etapa corresponde a uma célula na tabela de dados, uma entrada de legenda em uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo).
Neste gráfico, apenas uma entidade pode ser selecionada por vez.
Tipo de retorno:matriz de elementos de seleção
|
getVAxisValue(yPosition, optional_axis_index) |
Retorna o valor de dados vertical em Exemplo: Chame essa função depois que o gráfico for desenhado. Tipo de devolução: número
|
getXLocation(dataValue, optional_axis_index) |
Retorna a coordenada x do pixel de Exemplo: Chame essa função depois que o gráfico for desenhado. Tipo de devolução: número
|
getYLocation(dataValue, optional_axis_index) |
Retorna a coordenada y do pixel de Exemplo: Chame essa função depois que o gráfico for desenhado. Tipo de devolução: número
|
removeAction(actionID) |
Remove a ação da dica com o Tipo de devolução:
none |
setAction(action) |
Define uma ação de dica a ser executada quando o usuário clica no texto de ação.
O método
Todas as ações de dica precisam ser definidas antes de chamar o método Tipo de devolução:
none |
setSelection() |
Seleciona as entidades de gráfico especificadas. Cancela qualquer seleção anterior.
As entidades selecionáveis são etapas, entradas de legenda e categorias.
Uma etapa corresponde a uma célula na tabela de dados, uma entrada de legenda em uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo).
Neste gráfico, apenas uma entidade pode ser selecionada por vez.
Return Type: nenhum
|
clearChart() |
Limpa o gráfico e libera todos os recursos alocados. Return Type: nenhum
|
Eventos
Para mais informações sobre como usar esses eventos, consulte Interatividade básica, Como lidar com eventos e Como disparar eventos.
Nome | |
---|---|
animationfinish |
Disparado quando a animação de transição é concluída. Properties:nenhuma
|
click |
Disparado quando o usuário clica dentro do gráfico. Pode ser usado para identificar quando o título, os elementos de dados, as entradas de legenda, os eixos, as linhas de grade ou os rótulos são clicados. Propriedades:targetID
|
error |
Disparado quando ocorre um erro ao tentar renderizar o gráfico. Properties:ID, message
|
legendpagination |
Disparado quando o usuário clica nas setas de paginação de legendas. Transmite o índice de página baseado em zero atual e o número total de páginas. Propriedades:currentPageIndex, totalPages
|
onmouseover |
Disparado quando o usuário passa o mouse sobre uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Propriedades: linha, coluna
|
onmouseout |
Disparado quando o usuário afasta o mouse de uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Propriedades: linha, coluna
|
ready |
O gráfico está pronto para chamadas de métodos externos. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método Properties:nenhuma
|
select |
Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame
Properties:nenhuma
|
Política de dados
Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.