Visão geral
Um Histograma é um gráfico que agrupa dados numéricos em agrupamentos, exibindo os agrupamentos como colunas segmentadas. Elas são usadas para representar a distribuição de um conjunto de dados: a frequência com que os valores se enquadram em intervalos.
O recurso Gráficos do Google escolhe automaticamente o número de agrupamentos que você pode usar. Todas as classes têm a mesma largura e uma altura proporcional ao número de pontos de dados na lixeira. Em outros aspectos, os histogramas são semelhantes aos gráficos de colunas.
Exemplo
Veja um histograma de tamanhos de dinossauro:
O histograma diz que o agrupamento mais comum é < 10 metros e que há apenas um dinossauro com mais de 40 metros. Podemos passar o cursor sobre a barra para descobrir que é o Seismsaurus, que pode ser um Diplodocus muito grande. Os paleontologistas não têm certeza.
O código para gerar esse histograma é mostrado abaixo. Depois de definir
os dados (aqui,
com google.visualization.arrayToDataTable
), o gráfico é
definido com uma chamada para google.visualization.Histogram
e
desenhado com o método draw
.
<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([ ['Dinosaur', 'Length'], ['Acrocanthosaurus (top-spined lizard)', 12.2], ['Albertosaurus (Alberta lizard)', 9.1], ['Allosaurus (other lizard)', 12.2], ['Apatosaurus (deceptive lizard)', 22.9], ['Archaeopteryx (ancient wing)', 0.9], ['Argentinosaurus (Argentina lizard)', 36.6], ['Baryonyx (heavy claws)', 9.1], ['Brachiosaurus (arm lizard)', 30.5], ['Ceratosaurus (horned lizard)', 6.1], ['Coelophysis (hollow form)', 2.7], ['Compsognathus (elegant jaw)', 0.9], ['Deinonychus (terrible claw)', 2.7], ['Diplodocus (double beam)', 27.1], ['Dromicelomimus (emu mimic)', 3.4], ['Gallimimus (fowl mimic)', 5.5], ['Mamenchisaurus (Mamenchi lizard)', 21.0], ['Megalosaurus (big lizard)', 7.9], ['Microvenator (small hunter)', 1.2], ['Ornithomimus (bird mimic)', 4.6], ['Oviraptor (egg robber)', 1.5], ['Plateosaurus (flat lizard)', 7.9], ['Sauronithoides (narrow-clawed lizard)', 2.0], ['Seismosaurus (tremor lizard)', 45.7], ['Spinosaurus (spiny lizard)', 12.2], ['Supersaurus (super lizard)', 30.5], ['Tyrannosaurus (tyrant lizard)', 15.2], ['Ultrasaurus (ultra lizard)', 30.5], ['Velociraptor (swift robber)', 1.8]]); var options = { title: 'Lengths of dinosaurs, in meters', legend: { position: 'none' }, }; var chart = new google.visualization.Histogram(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Os rótulos (neste caso, os nomes dos dinossauros) podem ser omitidos. Nesse caso, as dicas mostrarão apenas o valor numérico.
Como controlar cores
Veja um histograma das populações nacionais:
Há mais de 200 países com populações abaixo de 100.000, ficando severas depois disso.
Esse histograma usa a opção colors
para desenhar os dados
em verde:
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['green'], };
Assim como em todos os gráficos do Google, as cores podem ser especificadas como nomes em inglês ou valores hexadecimais.
Como controlar buckets
Por padrão, o recurso Gráficos do Google escolhe o tamanho do bucket automaticamente usando um algoritmo conhecido para histogramas. No entanto, às vezes é necessário substituir isso, e o gráfico acima é um exemplo. Com tantos países no primeiro bucket, é difícil examiná-los em outros.
Para situações como essa, o gráfico do histograma fornece duas
opções: histogram.bucketSize
, que substitui o
algoritmo e codifica o tamanho do bucket
e histogram.lastBucketPercentile
. A segunda opção
precisa de mais explicações: ela muda a computação de
tamanhos de bucket para ignorar os valores maiores ou menores do que os
valores restantes pela porcentagem especificada. Os valores ainda estão
incluídos no histograma, mas não afetam o modo como eles são
agrupados. Isso é útil quando você não quer que os valores atípicos fiquem nos
próprios buckets. Em vez disso, eles são agrupados com o primeiro ou o último bucket.
No gráfico acima, ignoramos os cinco principais e cinco piores valores de cálculo do tamanho do bucket. Os valores ainda são exibidos no gráfico. A única coisa que mudou é o tamanho do bucket, mas isso deixa o histograma mais legível.
Neste exemplo, também mostramos como alterar a escala do eixo vertical para usar a escala de "registro espelhado", que também ajuda a gerar gráficos com dados que têm uma cauda longa de valores pequenos.
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { lastBucketPercentile: 5 }, vAxis: { scaleType: 'mirrorLog' } };
Como você pode ver, remover os 5% superiores e inferiores do cálculo levou a um tamanho de bucket de 10.000.000 em vez de aos 100.000.000 que seriam. Se você soubesse que um tamanho de bucket de 10.000.000 era o que você queria, poderia ter usado histogram.bucketSize
para fazer isso:
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { bucketSize: 10000000 } };
No exemplo a seguir, mostramos como expandir o intervalo de buckets e exibir muito
mais buckets sem lacunas entre eles. A opção maxNumBuckets
pode ser usada
para aumentar o número padrão de buckets. As opções histogram.minValue
e histogram.maxValue
expandirão o intervalo dos buckets, mas observe que, se houver dados fora desse intervalo, essas opções não o reduzirão.
Este exemplo também mostra que é possível especificar as marcações a serem exibidas para cada um dos buckets usando
a opção ticks
explícita para o hAxis
. Isso não afeta os
buckets em si, mas apenas como as marcações são exibidas.
Também especificamos o chartArea.width
para que o número de buckets seja mais preciso sem artefatos visuais. Veja as opções para esse exemplo.
var options = { title: 'Approximating Normal Distribution', legend: { position: 'none' }, colors: ['#4285F4'], chartArea: { width: 405 }, hAxis: { ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1] }, bar: { gap: 0 }, histogram: { bucketSize: 0.01, maxNumBuckets: 400, minValue: -1, maxValue: 1 } };
Várias séries
Veja um histograma das cobranças de partículas subatômicas, de acordo com o modelo padrão:
O gráfico acima tem uma série que contém todas as partículas. As partículas subatômicas podem ser divididas em quatro grupos: quarks, leeptons e bósons. Vamos tratar cada uma como uma série:
Neste gráfico, usamos uma série diferente (e, portanto, cor) para
cada um dos quatro tipos de partícula subatômica. Definimos explicitamente
interpolateNulls
como false
para garantir que
os valores nulos (necessários porque a série tem comprimento desigual)
não sejam representados no gráfico. Também definimos legend.maxLines
para adicionar
outra linha à legenda:
var data = google.visualization.arrayToDataTable([ ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'], [2/3, -1, 0, 0], [2/3, -1, 0, null], [2/3, -1, 0, null], [-1/3, 0, 1, null], [-1/3, 0, -1, null], [-1/3, 0, null, null], [-1/3, 0, null, null] ]); var options = { title: 'Charges of subatomic particles', legend: { position: 'top', maxLines: 2 }, colors: ['#5C3292', '#1A8763', '#871B47', '#999999'], interpolateNulls: false, };
Carregando
O nome do pacote google.charts.load
é "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
O nome da classe da visualização é google.visualization.Histogram
:
var visualization = new google.visualization.Histogram(container);
Formato de dados
Há duas maneiras de preencher uma tabela de dados de histograma. Quando há apenas uma série:
var data = google.visualization.arrayToDataTable([ ['Name', 'Number'], ['Name 1', number1], ['Name 2', number2], ['Name 3', number3], ... ]);
...e quando há várias séries:
var data = google.visualization.arrayToDataTable([ ['Series Name 1', 'Series Name 2', 'Series Name 3', ...], [series1_number1, series2_number1, series3_number1, ...], [series1_number2, series2_number2, series3_number2, ...], [series1_number3, series2_number3, series3_number3, ...], ... ]);
No momento, não há suporte para funções de coluna opcionais para histogramas.
Opções de configuração
Nome | |
---|---|
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
|
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%.
|
Á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
|
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.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} 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. 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.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>}
|
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. 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.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:
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 |
O índice de linhas com base em zero em que a janela de corte termina. Os pontos de dados nesse índice e
superiores serão cortados. Junto com Ignorado quando Tipo:número
Padrão: automático
|
hAxis.viewWindow.min |
O índice de linhas com base em zero em que a janela de corte começa. Os pontos de dados em índices inferiores
a esse serão cortados. Junto com Ignorado quando Tipo:número
Padrão:automático
|
histograma.bucketSize |
Codifique o tamanho de cada barra de histograma em vez de permitir que ela seja determinada por algoritmos. Tipo: número
Padrão: automático
|
histograma.hideBucketItems |
Omita as divisões finas entre os blocos do histograma, transformando-o em uma série de barras sólidas. Tipo: booleano
Padrão:falso
|
histograma.lastBucketPercentile |
Ao calcular o tamanho do bucket do histograma, ignore as porcentagens Tipo: número
Padrão:0
|
histograma.Valor mínimo |
Amplie o intervalo de buckets para incluir esse valor. Tipo: número
Padrão:usar dados mínimo
|
histograma.maxValue |
Amplie o intervalo de buckets para incluir esse valor. Tipo:número
Padrão:usar dados máx.
|
Histo.numBucketsRule |
Como calcular o número padrão de buckets. Os valores possíveis são:
Tipo: string
Padrão:
'sqrt' |
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, empilha os elementos para todas as séries em cada valor de domínio. Observação: nos gráficos Column, Area e SteppedArea, o Google Graph inverte a ordem dos itens de legenda para corresponder melhor ao empilhamento dos elementos da série (por exemplo, a série 0 será o item de legenda mais abaixo). Isso não se aplica a gráficos de barras.
A opção As opções para
Para 100% de empilhamento, o valor calculado de cada elemento aparecerá na dica depois do valor real.
Por padrão, o eixo desejado vai usar valores de escala com base na escala relativa de 0 a 1, como frações de 1 a
O empilhamento de 100% é compatível apenas com valores de dados do tipo Tipo: booleano/string
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>}
|
orientação |
A orientação do gráfico. Quando definido como Tipo: string
Padrão: "horizontal"
|
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. Tipo: booleano
Padrão: falso
|
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: {}
|
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.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
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.
Entidades selecionáveis são barras, entradas de legenda e categorias.
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.
Entidades selecionáveis são barras, entradas de legenda e categorias.
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. Uma barra está correlacionada a uma célula na tabela de dados, uma entrada de legenda a uma coluna (o índice da linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo). 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. Uma barra está correlacionada a uma célula na tabela de dados, uma entrada de legenda a uma coluna (o índice da linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo). 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.