Visão geral
Um gráfico de pizza que é renderizado no navegador usando SVG ou VML. Exibe dicas ao passar o cursor sobre as fatias.
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(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
Como criar um gráfico de pizza 3D
Se você definir a opção is3D
como true
, o gráfico de pizza será desenhado como se tivesse três dimensões:
is3D
é false
por padrão, então o definimos explicitamente como true
:
<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([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); chart.draw(data, options); } </script> </head> <body> <div id="piechart_3d" style="width: 900px; height: 500px;"></div> </body> </html>
Criar um gráfico de rosca
Um gráfico de rosca é uma pizza com um buraco no centro. É
possível criar gráficos de rosca com a opção pieHole
:
A opção pieHole
precisa ser definida como um número entre 0 e 1, correspondente à proporção de raios entre o buraco e o gráfico. Os números entre 0,4 e 0,6 ficam melhores na maioria dos gráficos.
Valores iguais ou maiores que 1 serão ignorados, e um valor de 0
fechará totalmente o buracos.
<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([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); } </script> </head> <body> <div id="donutchart" style="width: 900px; height: 500px;"></div> </body> </html>
Não é possível combinar as opções pieHole
e is3D
.
Se fizer isso, pieHole
será ignorado.
Os Gráficos Google tentam colocar o rótulo o mais próximo possível do centro da fatia possível. Se você tiver um gráfico de rosca com apenas uma fatia, o centro dela poderá cair no buraco. Nesse caso, altere a cor do rótulo:
var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };
<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([ ['Effort', 'Amount given'], ['My all', 100], ]); var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' }; var chart = new google.visualization.PieChart(document.getElementById('donut_single')); chart.draw(data, options); } </script> </head> <body> <div id="donut_single" style="width: 900px; height: 500px;"></div> </body> </html>
Como rotacionar um gráfico de pizza
Por padrão, os gráficos de pizza começam com a borda esquerda da primeira fatia apontando para cima. É possível mudar isso com
a opção pieStartAngle
:
Aqui, a rotação do gráfico é de 100 graus no sentido horário com a opção pieStartAngle: 100
. Por isso, esse ângulo específico faz com que o rótulo "italiano" se encaixe na fatia.
<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([ ['Language', 'Speakers (in millions)'], ['German', 5.85], ['French', 1.66], ['Italian', 0.316], ['Romansh', 0.0791] ]); var options = { legend: 'none', pieSliceText: 'label', title: 'Swiss Language Use (100 degree rotation)', pieStartAngle: 100, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
Como explorar um Slice
É possível separar frações de pizza do restante do gráfico com a propriedade offset
da opção slices
:
Para separar uma fatia, crie um objeto slices
e atribua o número adequado
a uma offset
entre 0 e 1. Veja abaixo os deslocamentos progressivamente maiores para as fatias 4 (guzerate), 12 (marata), 14 (Oriya) e 15 (Punjabi):
<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([ ['Language', 'Speakers (in millions)'], ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4], ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300], ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5], ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5], ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33], ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5], ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52] ]); var options = { title: 'Indian Language Use', legend: 'none', pieSliceText: 'label', slices: { 4: {offset: 0.2}, 12: {offset: 0.3}, 14: {offset: 0.4}, 15: {offset: 0.5}, }, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
Como remover Slices
Para omitir uma fatia, altere a cor
para 'transparent'
:
Também usamos o pieStartAngle
para girar o gráfico em 135
graus, pieSliceText
para remover o texto das
frações e tooltip.trigger
para desativar as dicas:
<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([ ['Pac Man', 'Percentage'], ['', 75], ['', 25] ]); var options = { legend: 'none', pieSliceText: 'none', pieStartAngle: 135, tooltip: { trigger: 'none' }, slices: { 0: { color: 'yellow' }, 1: { color: 'transparent' } } }; var chart = new google.visualization.PieChart(document.getElementById('pacman')); chart.draw(data, options); } </script> </head> <body> <div id="pacman" style="width: 900px; height: 500px;"></div> </body> </html>
Limite de visibilidade do intervalo
É possível definir um valor como limite para que uma fatia de pizza seja renderizada individualmente. Esse valor corresponde a uma fração do gráfico, sendo que o gráfico inteiro tem o valor 1. Para definir esse limite como uma porcentagem do total, divida a porcentagem desejada por 100.Para um limite de 20%, o valor seria 0,2.
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
As frações menores que esse limite serão combinadas em uma única parcela "Outro" e terão o valor combinado de todas as fatias abaixo do limite.
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Pizza'); data.addColumn('number', 'Populartiy'); data.addRows([ ['Pepperoni', 33], ['Hawaiian', 26], ['Mushroom', 22], ['Sausage', 10], // Below limit. ['Anchovies', 9] // Below limit. ]); var options = { title: 'Popularity of Types of Pizza', sliceVisibilityThreshold: .2 }; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }
Carregando
O nome do pacote google.charts.load
é "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
O nome da classe do layout é google.visualization.PieChart
.
var visualization = new google.visualization.PieChart(container);
Formato de dados
Linhas:cada linha da tabela representa uma fatia.
Columns:
Coluna 0 | Coluna 1 | … | Coluna N (opcional) | |
---|---|---|---|---|
Finalidade: | Identificadores do Slice | Valores do Slice | … | Papéis opcionais |
Tipo de dado: | string | number | … | |
Papel: | domínio | dados | … | |
Papéis de coluna opcionais: | Nenhuma | Nenhuma | … |
Opções de configuração
Nome | |
---|---|
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"
|
Á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
|
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
|
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
|
altura |
Altura do gráfico, em pixels. Tipo:número
Padrão:altura do elemento em questão
|
is3D |
Se for verdadeiro, exibirá um gráfico tridimensional. Tipo: booleano
Padrão: falso
|
lenda |
Um objeto com membros para configurar vários aspectos da legenda. Para especificar as propriedades desse objeto, use a notação literal de objeto, conforme mostrado aqui: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Tipo: objeto
Padrão:nulo
|
legenda.alinhamento |
Alinhamento da legenda. Será um dos seguintes valores:
O início, o centro e o fim são relativos ao estilo (vertical ou horizontal) da legenda. Por exemplo, em uma legenda "direita", "início" e "fim" estão na parte superior e inferior, respectivamente. Para uma legenda "superior", "início" e "fim" estariam à esquerda e à direita da área, respectivamente. O valor padrão depende da posição da legenda. Para legendas "inferior", o padrão é "center", outras legendas padrão são "start". Tipo: string
Padrão:automático
|
legenda.posição |
Posição da legenda. Será um dos seguintes valores:
Tipo: string
Padrão: "right"
|
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.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>}
|
PieHole |
Se estiver entre 0 e 1, exibirá um gráfico de rosca. O buraco com um raio igual a
Tipo: número
Padrão:0
|
pieSliceBorderColor |
A cor das bordas da fatia. Aplicável apenas quando o gráfico é bidimensional. Tipo: string
Padrão: "branco"
|
TextoDetorta |
Conteúdo do texto exibido na fatia. Será um dos seguintes valores:
Tipo: string
Padrão: 'percentage'
|
PizzaSliceTexto |
Um objeto que especifica o estilo do texto da fatia. 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>}
|
PieStartAngle |
O ângulo, em graus, para rotação do gráfico. O padrão de Tipo: número
Padrão:
0 |
categorias inversas |
Se for verdadeiro, desenha as fatias no sentido anti-horário. O padrão é desenhar no sentido horário. Tipo: booleano
Padrão: falso
|
TortaResidueSliceColor |
Cor da fração de combinação que contém todas as frações abaixo de sliceVisibilityThreshold. Tipo: string
Padrão: '#ccc'
|
pieResidueSliceLabel |
Um rótulo para a fração de combinação que contém todas as frações abaixo de sliceVisibilityThreshold. Tipo: string
Padrão: "Outro"
|
frações |
É uma matriz de objetos, cada um descrevendo o formato da fatia correspondente. Para
usar valores padrão para uma fração, especifique um objeto vazio (por exemplo,
É possível especificar uma matriz de objetos, cada uma sendo aplicada à fração na ordem especificada, ou especificar um objeto em que cada filho tem uma chave numérica indicando a qual fatia se aplica. Por exemplo, as duas declarações a seguir são idênticas e declaram a primeira fatia como preta e a quarta como vermelha: slices: [{color: 'black'}, {}, {}, {color: 'red'}] slices: {0: {color: 'black'}, 3: {color: 'red'}} Tipo: matriz de objetos ou objetos com objetos aninhados
Padrão:{}
|
Página de visibilidade |
O valor fracionário da pizza. Abaixo disso, uma fatia não será exibida individualmente. Todas as frações que não ultrapassarem esse limite serão combinadas para uma única "outra", cujo tamanho é a soma de todos os tamanhos. O padrão não é mostrar individualmente qualquer fatia que seja menor que meio grau. // Slices less than 25% of the pie will be // combined into an "Other" slice. sliceVisibilityThreshold: .25 Tipo: número
Padrão: meio grau (.5/360 ou 1/720 ou .0014)
|
title |
Texto a ser exibido acima do gráfico. Tipo: string
Padrão: sem título
|
TítulodoEstiloEstilo |
Um objeto que especifica o estilo do texto do título. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
dica |
Um objeto com membros para configurar vários elementos de dica. Para especificar as propriedades desse objeto, use a notação literal de objeto, conforme mostrado aqui: {textStyle: {color: '#FF0000'}, showColorCode: true} Tipo: objeto
Padrão:nulo
|
tooltip.ignoreBounds |
Se definido como Observação: isso se aplica somente a dicas de HTML. Se ele estiver ativado com dicas de ferramentas SVG, qualquer estouro fora dos limites do gráfico será cortado. Consulte Como personalizar o conteúdo de dicas para mais detalhes. Tipo: booleano
Padrão:falso
|
tooltip.isHTML |
Se definida como verdadeira, use dicas renderizadas por HTML (em vez de renderizadas por SVG). Consulte Como personalizar o conteúdo de dicas para mais detalhes. Observação: a personalização do conteúdo da dica de HTML por meio do papel de dados da coluna de dica de ferramenta não é aceita pela visualização Gráfico de bolhas. Tipo: booleano
Padrão:falso
|
tooltip.showColorCode |
Se verdadeiro, exibe quadrados coloridos ao lado das informações da fatia na dica. Tipo: booleano
Padrão:falso
|
tooltip.texto |
Quais informações serão exibidas quando o usuário passar o cursor sobre uma fatia de pizza. Os seguintes valores são aceitos:
Tipo: string
Padrão: "ambos"
|
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"
|
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 frações e entradas de legenda.
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 frações e entradas de legenda.
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 | |
---|---|
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
|
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 entrada de fatia ou legenda está relacionada a uma linha na tabela de dados (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 entrada de fatia ou legenda está relacionada 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é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.