Visão geral
Um histograma é um gráfico que agrupa dados numéricos em agrupamentos, exibindo-os como colunas segmentadas. Eles são usados para representar a distribuição de um conjunto de dados: com que frequência os valores se enquadram em intervalos.
O Google Charts escolhe automaticamente o número de agrupamentos para você. Todos os agrupamentos têm a mesma largura e uma altura proporcional ao número de pontos de dados neles. Em outros aspectos, os histogramas são semelhantes aos gráficos de colunas.
Exemplo
Aqui está um histograma de comprimentos de dinossauros:
O histograma informa que o agrupamento mais comum tem menos de 10 metros e que há apenas um dinossauro com mais de 40 metros. Podemos passar o cursor sobre a barra para descobrir que é o sismólogo (que pode ser apenas um diplodoco muito grande. Os paleontólogos não têm certeza).
O código para gerar este 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 (aqui, os nomes dos dinossauros) podem ser omitidos. Nesse caso, as dicas mostrarão apenas o valor numérico.
Controlar cores
Veja um histograma de populações nacionais:
Há mais de 200 países com populações menores que 100 milhões, com uma redução severa 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'],
};
Como acontece com todos os gráficos do Google, as cores podem ser especificadas como nomes em inglês ou como valores hexadecimais.
Como controlar buckets
Por padrão, o Google Charts escolherá o tamanho do bucket automaticamente, usando um algoritmo conhecido para histogramas. No entanto, às vezes você precisará modificar 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 Histograma oferece duas
opções: histogram.bucketSize, que modifica o
algoritmo e codifica o tamanho do bucket,
e histogram.lastBucketPercentile. A segunda opção precisa de mais explicação: ela altera o cálculo dos tamanhos de bucket para ignorar os valores maiores ou menores que os valores restantes pela porcentagem especificada. Os valores ainda são
incluídos no histograma, mas não afetam como eles são
agrupados. Isso é útil quando você não quer que os outliers fiquem nos
próprios buckets. Em vez disso, eles serão agrupados no primeiro ou no último bucket.
No gráfico acima, ignoramos os cinco por cento superiores e inferiores ao calcular o tamanho do bucket. Os valores ainda estão no gráfico. A única coisa que mudou foi o tamanho do bucket, mas isso torna o histograma mais legível.
Este exemplo também mostra como alterar a escala do eixo vertical para usar a escala de "registro espelhado", o que também ajuda ao criar um gráfico com dados que tenham 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 dos 100.000.000, como seria. Se você soubesse o tempo todo 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 dos buckets e exibir muitos outros
sem lacuna 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.
Esse 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 hAxis. Isso não afeta os
buckets, apenas como as marcações são exibidas.
Observe também que especificamos o
chartArea.width para que o número de buckets caiba com mais precisão sem
artefatos visuais. Aqui estão as opções para este 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 cargas das 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, léptons e bósons. Vamos tratar cada uma como uma série própria:
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 as séries são de comprimento desigual) não sejam plotados. 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 houver apenas uma série:
var data = google.visualization.arrayToDataTable([
['Name', 'Number'],
['Name 1', number1],
['Name 2', number2],
['Name 3', number3],
...
]);
...e quando houver 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, nenhum papel de coluna opcional é compatível com histogramas.
Opções de configuração
| Nome | |
|---|---|
| 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"
|
| 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"
|
| bar.groupWidth |
A largura de um grupo de barras, especificada em um destes formatos:
Tipo:número ou string
Padrão:
a proporção áurea,
aproximadamente "61,8%".
|
| 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
|
| dataOpacity |
A transparência dos pontos de dados, sendo 1,0 completamente opaco e 0,0 totalmente transparente. Em gráficos de dispersão, histograma, barras e colunas, isso se refere aos dados visíveis: pontos no gráfico de dispersão e retângulos nos outros. Nos gráficos em que a seleção de dados cria um ponto, como os gráficos de linhas e áreas, isso se refere aos círculos que aparecem ao passar o cursor ou quando você é selecionado. O gráfico de combinação exibe os dois comportamentos, e essa opção não afeta os outros gráficos. Para mudar a opacidade de uma linha de tendência, consulte Opacidade da linha de tendência . Tipo: número
Padrão:1,0
|
| enableInteractivity |
Se o gráfico gera eventos com base no usuário ou reage à interação do usuário. Se for falso, o gráfico não vai gerar "select" ou outros eventos baseados em interação (mas vai gerar eventos prontos ou de erro) e não vai mostrar texto de passar o cursor nem mudar de acordo com a entrada do usuário. Tipo: booleano
Padrão:true
|
| 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.gridlines |
Um objeto com propriedades para configurar as linhas de grade no eixo horizontal. As linhas de grade do eixo horizontal são desenhadas verticalmente. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {color: '#333', minSpacing: 20}
Tipo: objeto
Padrão:nulo
|
| hAxis.gridlines.color |
A cor das linhas de grade horizontais dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão: "#CCC"
|
| hAxis.gridlines.count |
O número aproximado de linhas de grade horizontais dentro da área do gráfico.
Se você especificar um número positivo para Tipo: número
Padrão: -1
|
| hAxis.gridlines.interval |
Uma matriz de tamanhos (como valores de dados, e não pixels) entre linhas de grade adjacentes. No momento, essa opção é apenas para eixos numéricos, mas é análoga às opções Tipo:número entre 1 e 10, não incluindo 10.
Padrão:computada
|
| hAxis.gridlines.minSpacing |
O espaço mínimo na tela, em pixels, entre as principais linhas de grade do eixo h.
O padrão para as principais linhas de grade é Tipo: número
Padrão:computada
|
| hAxis.gridlines.multiple |
Todos os valores de linhas de grade e escalas precisam ser múltiplos do valor desta
opção. Observe que, ao contrário dos intervalos, potências de 10 vezes o múltiplo não são consideradas.
Portanto, você pode forçar as marcações a serem números inteiros especificando
Tipo: número
Padrão: 1
|
| hAxis.gridlines.units |
Modifica o formato padrão para vários aspectos dos tipos de dados de data/hora/hora/hora quando usados com linhas de grade calculadas em gráficos. Permite a formatação para anos, meses, dias, horas, minutos, segundos e milissegundos. O formato geral é:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Para mais informações, consulte Datas e horas. Tipo: objeto
Padrão:nulo
|
| hAxis.minorGridlines |
Um objeto com membros para configurar as linhas de grade secundárias no eixo horizontal, semelhante à opção hAxis.gridlines. Tipo: objeto
Padrão:nulo
|
| hAxis.minorGridlines.color |
A cor das linhas de grade menores horizontais dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão:uma mistura das cores de linha de grade e de plano de fundo
|
| hAxis.minorGridlines.count |
A opção Tipo: número
Padrão:1
|
| hAxis.minorGridlines.interval |
A opção smallGridlines.interval é como a opção de intervalo das linhas de grade principais, mas o intervalo escolhido sempre será um divisor par do intervalo da linha de grade principal.
O intervalo padrão para escalas lineares é
Tipo: número
Padrão:1
|
| hAxis.minorGridlines.minSpacing |
O espaço mínimo necessário, em pixels, entre linhas de grade secundárias adjacentes e entre linhas de grade secundárias e principais. O valor padrão é 1/2 do minSpacing das principais linhas de grade para escalas lineares e 1/5 do minSpacing para escalas de registro. Tipo: número
Padrão:calculado
|
| hAxis.minorGridlines.multiple |
Igual à Tipo: número
Padrão: 1
|
| hAxis.minorGridlines.units |
Substitui o formato padrão de vários aspectos dos tipos de dados date/datetime/timeofday quando usados com smallGridlines calculadas em gráfico. Permite a formatação para anos, meses, dias, horas, minutos, segundos e milissegundos. O formato geral é:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Para mais informações, consulte Datas e horas. Tipo: objeto
Padrão:nulo
|
| hAxis.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.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.viewWindowMode |
Especifica como dimensionar o eixo horizontal para renderizar os valores dentro da área do gráfico. Aceitamos os seguintes valores de string:
Tipo: string
Padrão:equivalente a "pretty", mas
haxis.viewWindow.min e
haxis.viewWindow.max têm precedência, se usados.
|
| hAxis.viewWindow |
Especifica o intervalo de corte do eixo horizontal. Tipo: objeto
Padrão:nulo
|
| hAxis.viewWindow.max |
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
|
| histogram.bucketSize |
Codifique o tamanho de cada barra de histograma em vez de permitir que ele seja determinado por algoritmos. Tipo: número
Padrão:automático
|
| histogram.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:false
|
| histogram.lastBucketPercentile |
Ao calcular o tamanho do bucket do histograma, ignore os Tipo: número
Padrão:0
|
| histogram.minValue |
Expanda o intervalo de buckets para incluir esse valor. Tipo: número
Padrão:automático - usar mínimo de dados
|
| histogram.maxValue |
Expanda o intervalo de buckets para incluir esse valor. Tipo: número
Padrão: automático: usar máximo de dados
|
| histogram.numBucketsRule |
Como calcular o número padrão de buckets. Os valores possíveis são:
Tipo: string
Padrão:
'sqrt' |
| height |
Altura do gráfico, em pixels. Tipo: número
Padrão:altura do elemento contêiner
|
| interpolateNulls |
Define se o valor de pontos ausentes deve ser determinado. Se verdadeiro, ele adivinhará o valor de todos os dados ausentes com base nos pontos vizinhos. Se for falso, vai deixar uma quebra na linha em um ponto desconhecido.
Isso não é compatível com gráficos de área com a opção Tipo: booleano
Padrão:false
|
| isStacked |
Se definido como verdadeiro, empilha os elementos de todas as séries em cada valor de domínio. Observação:nos gráficos de Coluna, Área e SteppedArea, o Google Charts inverte a ordem dos itens de legenda para que eles correspondam melhor ao empilhamento dos elementos da série (por exemplo, a série 0 será o item de legenda na parte de baixo). Isso não se aplica a gráficos de barras.
A opção As opções para
Para o empilhamento 100%, o valor calculado de cada elemento vai aparecer na dica após o valor real.
Por padrão, o eixo de destino exibirá valores de marcação com base na escala relativa de 0 a 1 como frações de 1 para
O empilhamento 100% só oferece suporte a valores de dados do tipo Tipo: booleano/string
Padrão:false
|
| lenda |
Um objeto com membros para configurar vários aspectos da legenda. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tipo: objeto
Padrão:nulo
|
| legend.alignment |
Alinhamento da legenda. Será um dos seguintes valores:
Início, centro e fim são relativos ao estilo (vertical ou horizontal) da legenda. Por exemplo, em uma legenda de "direita", "início" e "fim" estão na parte de cima e de baixo, respectivamente. Para uma legenda de "topo", "início" e "fim" estariam à esquerda e à direita da área, respectivamente. O valor padrão depende da posição da legenda. Para legendas "bottom", o padrão é "center". Outras legendas têm como padrão "start". Tipo: string
Padrão:automático
|
| legend.maxLines |
Número máximo de linhas na legenda. Defina como um número maior que um para adicionar linhas à legenda. Observação: a lógica exata usada para determinar o número real de linhas renderizadas ainda está em fluxo. No momento, essa opção funciona apenas quando caption.position é "topo". Tipo: número
Padrão: 1
|
| legend.pageIndex |
Índice de página inicial selecionado da legenda. Tipo: número
Padrão:0
|
| legend.position |
Posição da legenda. Será um dos seguintes valores:
Tipo: string
Padrão: "right"
|
| legend.textStyle |
Um objeto que especifica o estilo do texto da legenda. O objeto tem este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| orientação |
A orientação do gráfico. Quando definida como Tipo: string
Padrão: "horizontal"
|
| 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
|
| 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.isHtml |
Se definida como verdadeira, use dicas renderizadas em HTML (em vez de renderizadas em SVG). Consulte Como personalizar o conteúdo da dica para mais detalhes. Observação:a personalização do conteúdo da dica HTML pelo papel de dados da coluna de dicas não é compatível com a visualização do gráfico de bolhas. Tipo: booleano
Padrão:false
|
| tooltip.showColorCode |
Se verdadeiro, mostra quadrados coloridos ao lado das informações da série na dica. O padrão é
verdadeiro quando Tipo: booleano
Padrão:automático
|
| tooltip.textStyle |
Um objeto que especifica o estilo do texto da dica. O objeto tem este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
A interação do usuário que faz com que a dica seja exibida:
Tipo: string
Padrão: "focus"
|
| vAxes |
Especifica propriedades para eixos verticais individuais, se o gráfico tiver vários eixos verticais.
Cada objeto filho é um objeto
Para especificar um gráfico com vários eixos verticais, primeiro defina um novo eixo usando
{
series: {
2: {
targetAxisIndex:1
}
},
vAxes: {
1: {
title:'Losses',
textStyle: {color: 'red'}
}
}
}
Essa propriedade pode ser um objeto ou uma matriz: o objeto é uma coleção de objetos, cada um com um rótulo numérico que especifica o eixo definido. Este é o formato mostrado acima; a matriz é uma matriz de objetos, um por eixo. Por exemplo, a seguinte notação de estilo de matriz é idêntica ao objeto
vAxes: [
{}, // Nothing specified for axis 0
{
title:'Losses',
textStyle: {color: 'red'} // Axis 1
}
]
Tipo: matriz de objeto ou objeto com objetos filhos
Padrão:nulo
|
| vAxis |
Um objeto com membros para configurar vários elementos do eixo vertical. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Tipo: objeto
Padrão:nulo
|
| vAxis.baseline |
Propriedade Tipo: número
Padrão:automático
|
| vAxis.baselineColor |
Especifica a cor da linha de base para o eixo vertical. Pode ser qualquer string de cor HTML, por
exemplo: Tipo: número
Padrão: "preto"
|
| vAxis.direction |
A direção em que os valores ao longo do eixo vertical crescem. Por padrão, os valores baixos ficam na parte inferior do gráfico. Especifique Tipo:1 ou -1
Padrão: 1
|
| vAxis.format |
Uma string de formato para os rótulos dos eixos numéricos. Esse é um subconjunto do
conjunto de padrões de ICU
.
Por exemplo,
A formatação real aplicada ao rótulo é derivada da localidade com que a API foi carregada. Para mais detalhes, consulte Como carregar gráficos com uma localidade específica .
No cálculo de valores de marcação e linhas de grade, várias combinações alternativas de todas as opções de linha de grade relevantes serão consideradas, e alternativas serão rejeitadas se os rótulos de marcação formatados forem duplicados ou sobrepostos.
Portanto, você pode especificar Tipo: string
Padrão:automático
|
| vAxis.gridlines |
Um objeto com membros para configurar as linhas de grade no eixo vertical. As linhas de grade do eixo vertical são desenhadas horizontalmente. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {color: '#333', minSpacing: 20}
Tipo: objeto
Padrão:nulo
|
| vAxis.gridlines.color |
A cor das linhas de grade verticais dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão: "#CCC"
|
| vAxis.gridlines.count |
O número aproximado de linhas de grade horizontais dentro da área do gráfico.
Se você especificar um número positivo para Tipo: número
Padrão: -1
|
| vAxis.gridlines.interval |
Uma matriz de tamanhos (como valores de dados, e não pixels) entre linhas de grade adjacentes. No momento, essa opção é apenas para eixos numéricos, mas é análoga às opções Tipo:número entre 1 e 10, não incluindo 10.
Padrão:computada
|
| vAxis.gridlines.minSpacing |
O espaço mínimo na tela, em pixels, entre as principais linhas de grade do eixo h.
O padrão para as principais linhas de grade é Tipo: número
Padrão:computada
|
| vAxis.gridlines.multiple |
Todos os valores de linhas de grade e escalas precisam ser múltiplos do valor desta
opção. Observe que, ao contrário dos intervalos, potências de 10 vezes o múltiplo não são consideradas.
Portanto, você pode forçar as marcações a serem números inteiros especificando
Tipo: número
Padrão: 1
|
| vAxis.gridlines.units |
Modifica o formato padrão para vários aspectos dos tipos de dados de data/hora/hora/hora quando usados com linhas de grade calculadas em gráficos. Permite a formatação para anos, meses, dias, horas, minutos, segundos e milissegundos. O formato geral é:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]},
hours: {format: [/*format strings here*/]},
minutes: {format: [/*format strings here*/]},
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]}
}
}
Para mais informações, consulte Datas e horas. Tipo: objeto
Padrão:nulo
|
| vAxis.minorGridlines |
Um objeto com membros para configurar as linhas de grade secundárias no eixo vertical, semelhante à opção vAxis.gridlines. Tipo: objeto
Padrão:nulo
|
| vAxis.minorGridlines.color |
A cor das linhas de grade verticais menores dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão:uma mistura das cores de linha de grade e de plano de fundo
|
| vAxis.minorGridlines.count |
A opção menosGridlines.count está obsoleta, exceto para desativar linhas de grade secundárias ao definir a contagem como 0. O número de linhas de grade secundárias depende do intervalo entre as principais linhas de grade (consulte vAxis.gridlines.interval) e o espaço mínimo necessário (consulte vAxis.minorGridlines.minSpacing). Tipo: número
Padrão: 1
|
| vAxis.minorGridlines.interval |
A opção smallGridlines.interval é como a opção de intervalo das linhas de grade principais, mas o intervalo escolhido sempre será um divisor par do intervalo da linha de grade principal.
O intervalo padrão para escalas lineares é
Tipo: número
Padrão:1
|
| vAxis.minorGridlines.minSpacing |
O espaço mínimo necessário, em pixels, entre linhas de grade secundárias adjacentes e entre linhas de grade secundárias e principais. O valor padrão é 1/2 do minSpacing das principais linhas de grade para escalas lineares e 1/5 do minSpacing para escalas de registro. Tipo: número
Padrão:calculado
|
| vAxis.minorGridlines.multiple |
Igual à Tipo: número
Padrão: 1
|
| vAxis.minorGridlines.units |
Substitui o formato padrão de vários aspectos dos tipos de dados date/datetime/timeofday quando usados com smallGridlines calculadas em gráfico. Permite a formatação para anos, meses, dias, horas, minutos, segundos e milissegundos. O formato geral é:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Para mais informações, consulte Datas e horas. Tipo: objeto
Padrão:nulo
|
| vAxis.logScale |
Se verdadeiro, transforma o eixo vertical em uma escala logarítmica. Observação: todos os valores precisam ser positivos. Tipo: booleano
Padrão:false
|
| vAxis.scaleType |
A propriedade
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 do 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 barras, entradas de legenda e categorias.
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 barras, entradas de legenda e categorias.
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. Uma barra correlaciona-se a uma célula na tabela de dados, uma entrada de legenda para uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo). 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. Uma barra correlaciona-se a uma célula na tabela de dados, uma entrada de legenda para uma coluna (o índice de 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é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.