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.