Visão geral
Um gráfico de bolhas renderizado no navegador usando SVG ou VML. Mostra dicas ao passar o cursor sobre os balões.
Um gráfico de bolhas é usado para visualizar um conjunto de dados com duas a quatro dimensões. As duas primeiras dimensões são visualizadas como coordenadas, a terceira como cor e a quarta como tamanho.
Exemplo
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="series_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Colorir de acordo com números
Você pode usar a opção colorAxis para colorir os balões
em proporção a um valor, conforme mostrado no exemplo abaixo.
<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([
['ID', 'X', 'Y', 'Temperature'],
['', 80, 167, 120],
['', 79, 136, 130],
['', 78, 184, 50],
['', 72, 278, 230],
['', 81, 200, 210],
['', 72, 170, 100],
['', 68, 477, 80]
]);
var options = {
colorAxis: {colors: ['yellow', 'red']}
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Personalizar rótulos
É possível controlar a família tipográfica, a fonte e a cor do balão com
a opção bubble.textStyle:
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
fontSize: 12,
fontName: 'Times-Roman',
color: 'green',
bold: true,
italic: true
}
}
};
<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([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
fontSize: 12,
fontName: 'Times-Roman',
color: 'green',
bold: true,
italic: true
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="textstyle" style="width: 900px; height: 500px;"></div>
</body>
</html>
Os rótulos no gráfico acima são difíceis de ler, e um dos motivos é o espaço em branco ao redor deles. Isso é chamado de aura e, se
você preferir gráficos sem eles, defina
bubble.textStyle.auraColor como 'none'.
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
auraColor: 'none'
}
}
};
<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([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
auraColor: 'none',
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="noAura" style="width: 900px; height: 500px;"></div>
</body>
</html>
Carregando
O nome do pacote google.charts.load é "corechart".
google.charts.load("current", {packages: ["corechart"]});
O nome da classe da visualização é google.visualization.BubbleChart.
var visualization = new google.visualization.BubbleChart(container);
Formato de dados
Linhas: cada linha na tabela representa um único balão.
Columns:
| Coluna 0 | Coluna 1 | Coluna 2 | Coluna 3 (opcional) | Coluna 4 (opcional) | |
|---|---|---|---|---|---|
| Finalidade: | ID (nome) do balão | Coordenada X | Coordenada Y | É um ID da série ou um valor que representa uma cor em uma escala de gradiente,
dependendo do tipo de coluna:
|
Tamanho: os valores nesta coluna são mapeados para valores reais de pixel usando a opção sizeAxis. |
| Tipo de dados: | string | number | number | string ou número | number |
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"
|
| bubble |
Um objeto com membros para configurar as propriedades visuais dos balões. Tipo: objeto
Padrão:nulo
|
| bubble.opacity |
É a opacidade dos círculos, em que 0 é totalmente transparente, e 1 é totalmente opaco. Tipo:número entre 0,0 e 1,0
Padrão:0,8
|
| bubble.stroke |
A cor do traço dos círculos. Tipo: string
Padrão: '#mostrado'
|
| bubble.textStyle |
Um objeto que especifica o estilo de texto do balão. O objeto tem este formato: {color: <string>, fontName: <string>, fontSize: <number>}
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| 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
|
| colorAxis |
Um objeto que especifica um mapeamento entre os valores da coluna de cores e as cores ou uma escala de gradiente. Para especificar as propriedades desse objeto, é possível usar a notação literal de objeto, como mostrado aqui: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Tipo: objeto
Padrão:nulo
|
| colorAxis.minValue |
Se presente, especifica um valor mínimo para os dados de cores do gráfico. Os valores de dados de cores desse valor
e de valores inferiores serão renderizados como a primeira cor no intervalo Tipo: número
Padrão:valor mínimo da coluna de cor nos dados do gráfico
|
| colorAxis.maxValue |
Se presente, especifica um valor máximo para os dados de cores do gráfico. Os valores de dados de cores desse valor
e de valores mais altos serão renderizados como a última cor no intervalo Tipo: número
Padrão:valor máximo da coluna de cor nos dados do gráfico
|
| colorAxis.values |
Se presente, controla como os valores são associados às cores. Cada valor é associado à cor correspondente na matriz Tipo:matriz de números
Padrão:nulo
|
| colorAxis.colors |
Cores a serem atribuídas a valores na visualização. Uma matriz de strings, em que cada elemento é uma string de cor HTML, por exemplo: Tipo:matriz de strings de cores
Padrão:nulo
|
| colorAxis.legend |
Um objeto que especifica o estilo da legenda da cor do gradiente. Tipo: objeto
Padrão:nulo
|
| colorAxis.legend.position |
Posição da legenda. Será um dos seguintes valores:
Tipo: objeto
Padrão: 'top'
|
| colorAxis.legend.textStyle |
Um objeto que especifica o estilo do texto da legenda. O objeto tem este formato: {color: <string>, fontName: <string>, fontSize: <number>}
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| colorAxis.legend.numberFormat |
Uma string de formato para rótulos numéricos. Esse é um subconjunto do
conjunto de padrões de ICU
.
Por exemplo, Tipo: string
Padrão:automático
|
| enableInteractivity |
Se o gráfico gera eventos com base no usuário ou reage à interação do usuário. Se for falso, o gráfico não vai gerar "select" ou outros eventos baseados em interação (mas vai gerar eventos prontos ou de erro) e não vai mostrar texto de passar o cursor nem mudar de acordo com a entrada do usuário. Tipo: booleano
Padrão:true
|
| explorer |
A opção Este recurso é experimental e pode mudar em versões futuras. Observação:o explorador só funciona com eixos contínuos (como números ou datas). Tipo: objeto
Padrão:nulo
|
| explorer.actions |
O explorador do Google Charts é compatível com três ações:
Tipo:matriz de strings
Padrão: ['dragToPan', 'rightClickToReset']
|
| explorer.axis |
Por padrão, os usuários podem movimentar a horizontal e a vertical quando a opção Tipo: string
Padrão:movimentação horizontal e vertical
|
| explorer.keepInBounds |
Por padrão, os usuários podem movimentar a tela, independentemente de onde os dados estejam. Para garantir que os usuários não sejam além do gráfico original, use Tipo: booleano
Padrão:false
|
| explorer.maxZoomIn |
O nível máximo de zoom que o explorador pode aumentar. Por padrão, os usuários poderão aumentar o zoom o suficiente para ver apenas 25% da visualização original. Definir Tipo: número
Padrão:0,25
|
| explorer.maxZoomOut |
O máximo que o explorador pode diminuir o zoom. Por padrão, os usuários podem diminuir o zoom o suficiente para que o gráfico ocupe apenas 1/4 do espaço disponível. Definir Tipo: número
Padrão:4
|
| explorer.zoomDelta |
Quando os usuários aumentam ou diminuem o zoom, o Tipo: número
Padrão:1,5
|
| fontSize |
O tamanho da fonte padrão, em pixels, de todo o texto no gráfico. É possível modificar isso usando propriedades de elementos específicos do gráfico. Tipo: número
Padrão:automático
|
| fontName |
O tipo de fonte padrão para todo o texto no gráfico. É possível modificar isso usando propriedades de elementos específicos do gráfico. Tipo: string
Padrão: "Arial"
|
| forceIFrame |
Desenha o gráfico dentro de um frame inline. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames. Tipo: booleano
Padrão:false
|
| hAxis |
Um objeto com membros para configurar vários elementos do eixo horizontal. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui:
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
Tipo: objeto
Padrão:nulo
|
| hAxis.baseline |
A linha de base do eixo horizontal. Tipo: número
Padrão:automático
|
| hAxis.baselineColor |
A cor da linha de base do eixo horizontal. Pode ser qualquer string de cor HTML, por exemplo: Tipo: número
Padrão: "preto"
|
| hAxis.direction |
A direção em que os valores ao longo do eixo horizontal crescem. Especifique Tipo:1 ou -1
Padrão: 1
|
| hAxis.format |
Uma string de formato para 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
|
| 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.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.units |
Substitui o formato padrão de vários aspectos dos tipos de dados date/datetime/timeofday quando usados com smallGridlines calculadas em gráfico. Permite a formatação para anos, meses, dias, horas, minutos, segundos e milissegundos. O formato geral é:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Para mais informações, consulte Datas e horas. Tipo: objeto
Padrão:nulo
|
| hAxis.logScale |
Propriedade Tipo: booleano
Padrão:false
|
| hAxis.scaleType |
A propriedade
Tipo: string
Padrão: nulo
|
| hAxis.textPosition |
Posição do texto do eixo horizontal em relação à área do gráfico. Valores aceitos: 'out', 'in', 'none'. Tipo: string
Padrão: 'out'
|
| hAxis.textStyle |
Um objeto que especifica o estilo do texto do eixo horizontal. O objeto tem este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.ticks |
Substitui as marcas do eixo X geradas automaticamente pela matriz especificada. Cada elemento da matriz deve ser um valor de marcação válido (como um número, data, data e hora ou timeofday) ou um objeto. Se for um objeto, ele precisará ter uma propriedade
A viewWindow será expandida automaticamente para
incluir as marcações mínima e máxima, a menos que você especifique um
Por exemplo:
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.maxValue |
Move o valor máximo do eixo horizontal para o valor especificado. Ele ocorre para a direita na
maioria dos gráficos. Ignorado se for definido como um valor menor que o valor x máximo dos dados.
Tipo: número
Padrão:automático
|
| hAxis.minValue |
Move o valor mínimo do eixo horizontal até o valor especificado. Ele fica para a esquerda na
maioria dos gráficos. Ignorado se for definido como um valor maior que o valor x mínimo dos dados.
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 valor máximo de dados horizontais a serem renderizados. Ignorado quando Tipo: número
Padrão:automático
|
| hAxis.viewWindow.min |
O valor mínimo de dados horizontais a serem renderizados. 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
|
| 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>}
|
| selectionMode |
Quando Tipo: string
Padrão: "single"
|
| séries |
Um objeto de objetos em que as chaves são nomes de séries (os valores na coluna Cor) e cada objeto descrevendo o formato da série correspondente no gráfico. Se uma série ou um valor não for especificado, o valor global será usado. Cada objeto é compatível com as seguintes propriedades:
series: {'Europe': {color: 'green'}}
Tipo: objeto com objetos aninhados
Padrão: {}
|
| sizeAxis |
Um objeto com membros para configurar como os valores são associados ao tamanho do balão. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {minValue: 0, maxSize: 20}
Tipo: objeto
Padrão:nulo
|
| sizeAxis.maxSize |
É o raio máximo do maior balão possível, em pixels. Tipo: número
Padrão:30
|
| sizeAxis.maxValue |
O valor do tamanho (conforme aparece nos dados do gráfico) a ser mapeado para Tipo: número
Padrão:valor máximo da coluna de tamanho nos dados do gráfico
|
| sizeAxis.minSize |
Raio mínimo do menor balão possível, em pixels. Tipo: número
Padrão:5
|
| sizeAxis.minValue |
O valor do tamanho (conforme aparece nos dados do gráfico) a ser mapeado para Tipo: número
Padrão:valor mínimo da coluna de tamanho nos dados do gráfico
|
| sortBubblesBySize |
Se verdadeiro, classifica os balões por tamanho para que os menores apareçam acima dos maiores. Se for falso, os balões serão classificados de acordo com sua ordem no DataTable. Tipo: booleano
Padrão:true
|
| 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.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"
|
| 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.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.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 balões.
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 balões.
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 bolha está correlacionada a uma linha na tabela de dados (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 bolha está correlacionada a uma linha na tabela de dados (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.