Overview
a pie chart that is rendered within the browser using SVG or VML. Mostra as dicas quando paira sobre as fatias.,
Exemplo
Fazer um Gráfico de Pizza 3D
Se você definir o is3D
opção true
, yourpie gráfico será desenhado como se tem três dimensões:
is3D
é false
por padrão, então aqui nós explicitamente definido para true
:
Fazer um Donut Gráfico
Um donut gráfico é um gráfico de pizza com um furo no centro., Você pode criar gráficos do donut com a opção pieHole
opção:
a opção pieHole
deve ser definida para um número entre 0 e 1, correspondendo à razão de raios entre o buraco e o thechart. Os números entre 0.4 e 0.6 ficarão melhores na maioria dos gráficos.Valores iguais ou superiores a 1 serão ignorados, e um valor de 0 será completamente fechado.
Você não pode combinar o pieHole
e is3D
opções; se o fizer, pieHole
será ignorada.,
Note que os gráficos do Google tentam colocar a etiqueta tão perto quanto possível do centro da fatia. Se você tem um gráfico de donut com apenas uma fatia, o centro da fatia pode cair no buraco do donut. Nesse caso, mude a cor da legenda:
var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };
rodando um gráfico circular
por omissão, os gráficos circulares começam com o bordo esquerdo da primeira unção em linha recta. Você pode mudar isso com pieStartAngle
opção:
Aqui, nós rodamos o gráfico no Sentido DOS ponteiros do relógio 100 graus com uma opção de pieStartAngle: 100
., (Tão escolhido porque esse particularangle faz o rótulo” Italiano ” caber dentro da fatia.)
Explosão de uma Fatia
Você pode separar as fatias da pizza do resto do gráfico com o offset
propriedade slices
opção:
Para separar uma fatia, crie uma slices
objeto e atribuir o adequado fatia número um offset
entre 0 e 1., Abaixo, podemos atribuir progressivamente maiores deslocamentos para fatias de 4 (Gujarati), 12 (Marathi), 14 (Oriá), e 15 (Punjabi):
Remover Fatias
Para omitir uma fatia, alterar o colorto 'transparent'
:
Nós também usamos a tag pieStartAngle
para rodar o gráfico 135degrees, pieSliceText
para remover o texto do theslices, e tooltip.trigger
para desactivar as descrições:
Fatia Visibilidade Limiar
Você pode definir um valor como o limite para que uma fatia de pizza para processar individualmente., Este valor corresponde a uma fração do gráfico (com todo o gráfico sendo de valor 1). Para fixar este limiar em percentagem do conjunto, dividir a percentagem desejada por 100 (para um limiar de 20%, o valor seria de 0,2).
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
quaisquer fatias menores que este limiar serão combinadas numa única fatia “outra”, e terão o valor combinado de todas as fatias abaixo do limiar.
Carregar
google.charts.load
nome do pacote é "corechart"
.,
google.charts.load("current", {packages: });
o nome da classe da visualização égoogle.visualization.PieChart
.
var visualization = new google.visualization.PieChart(container);
Formato de Dados
Linhas: Cada linha da tabela representa uma fatia.
Colunas:
Opções de Configuração
Nome | |
---|---|
backgroundColor |
A cor de plano de fundo para a área principal do gráfico. Pode ser uma cadeia de cores HTML simples, por exemplo: Type: string or object
Default: ‘white’
|
backgroundColor.traço |
a cor do contorno do gráfico, como uma cadeia de cores HTML. tipo: string
Default: ‘#666’
|
backgroundColor.strokeWidth |
a largura do contorno, em pixels. Tipo: Número
Default: 0
|
backgroundColor.preencha |
a cor de preenchimento do gráfico, como uma cadeia de cores HTML., Tipo: texto
Default: ‘white’
|
chartArea |
um objecto com membros para configurar o posicionamento e o tamanho da área da carta (onde a própria carta é desenhada, excluindo eixos e lendas). Dois formatos são suportados: um número, ou um número seguido por %. Um número simples é um valor em pixels; um número seguido por % é uma percentagem. Exemplo: Tipo: objeto
Default: null
|
chartArea.backgroundColor |
Chart area background color., Quando uma string é usada, pode ser tanto uma string hex (por exemplo, ‘#fdc’) ou um nome de cor inglês. Quando um objeto é usado, as seguintes propriedades podem ser fornecidas:
tipo: cadeia ou objecto
Default: ‘white’
|
chartArea.esquerda |
a que distância desenhar o gráfico a partir do contorno esquerdo., tipo: número ou cadeia de caracteres
Default: auto
|
chartArea.top |
a que distância desenhar o gráfico a partir do contorno superior. tipo: número ou cadeia de caracteres
Default: auto
|
chartArea.largura |
largura da área da Carta. tipo: número ou cadeia de caracteres
Default: auto
|
chartArea.altura |
altura da área da Carta. Type: number or string
Default: auto
|
colors |
the colors to use for the chart elements., Um array de strings, onde cada elemento é uma string de cores HTML, por exemplo: Type: Array of strings
Default: default colors
|
enable interactivity | |
fontSize | |
fontName | |
forceIFrame |
Desenha o gráfico dentro de um frame inline., (Note que no IE8, esta opção é ignorada; todos os gráficos IE8 são desenhados em I-frames.) tipo: booleano
Default: false
|
altura |
altura da carta, em pixels. Tipo: Número
Default: altura do elemento que contém
|
is3D |
Se for verdadeiro, mostra uma carta tridimensional. tipo: booleano
Default: false
|
legend | |
legend.alinhamento |
alinhamento da legenda. Pode ser um dos seguintes:
Start, center e end são relativos ao estilo — vertical ou horizontal — da legenda. Por exemplo, numa legenda “direita”, “início” e ” fim “estão no topo e no fundo, respectivamente; para uma legenda “topo”, “início” e ” fim ” estariam à esquerda e à direita da área, respectivamente. o valor por omissão depende da posição da legenda. Para as lendas ‘bottom’, o valor por omissão é’ center’; outras lendas predefinidas são’start’. tipo: string
Default: automatic
|
legend.posição |
posição da legenda., Pode ser um dos seguintes:
Tipo: texto
Default: ‘right’
|
legend.maxLines |
número máximo de linhas na legenda. Configure isto para um número maior que um para adicionar linhas à sua lenda., Nota: a lógica exata usada para determinar o número real de linhas renderizadas ainda está em fluxo. Esta opção funciona de momento apenas quando a legenda.a posição é “top”. Tipo: Número
Default: 1
|
legend.textStyle |
um objecto que especifica o estilo de texto da legenda. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
pieHole |
Se entre 0 e 1, apresenta um donut gráfico. O buraco com um raio igual a Tipo: número
Padrão: 0
|
pieSliceBorderColor |
A cor da fatia fronteiras. Aplicável apenas quando o gráfico for bidimensional., Tipo: string
Padrão: ‘branco’
|
pieSliceText |
O conteúdo do texto apresentado na fatia. Pode ser uma das seguintes:
Tipo: texto
Default: ‘percentagem’
|
pieSliceTextStyle |
um objecto que especifica o estilo de texto da fatia., O objeto tem este formato: {color: <string>, fontName: <string>, fontSize: <number>} Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
pieStartAngle |
O ângulo, em graus, para girar o gráfico. O padrão de Tipo: número
Padrão:
0 |
reverseCategories |
Se for verdade, desenha fatias no sentido anti-horário. O padrão é desenhar no sentido horário. Tipo: boolean
Padrão: false
|
pieResidueSliceColor |
Cor para a combinação fatia que detém todas as fatias abaixo sliceVisibilityThreshold., Tipo: texto
Default: ‘#ccc’
|
pieResidueSliceLabel |
um rótulo para a fatia combinada que contém todas as fatias abaixo da linha de separação. Tipo: Cadeia de caracteres
Default: ‘outro’
|
fatias |
uma série de objectos, cada um descrevendo o formato da fatia correspondente na tarte. Para usar valores predefinidos para uma fatia, indique um objecto vazio (ou seja,
poderá indicar uma lista de objectos, cada um dos quais se aplica à fatia na ordem dada, ou poderá indicar um objecto onde cada criança tenha uma chave numérica que indique a que fatia se aplica. Por exemplo, as seguintes duas declarações são idênticos, e declare a primeira fatia como o preto e o quarto vermelho: slices: slices: {0: {color: 'black'}, 3: {color: 'red'}} Tipo: Matriz de objetos, ou objeto com objetos aninhados
Predefinição: {}
|
sliceVisibilityThreshold |
O valor fracionário de pizza, abaixo do qual uma fatia não irá mostrar individualmente., Todas as fatias que não tenham passado este limiar serão combinadas a uma única “outra” fatia, cujo tamanho é a soma de todos os seus 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
Default: meio grau (.5/360 ou 1/720 ou .0014)
|
título |
texto a mostrar acima da carta. Type: string
Default: no title
|
titleTextStyle |
an object that specifies the title text style., The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
tooltip |
An object with members to configure various tooltip elements., Para especificar as propriedades deste objecto, poderá usar a notação literal do objecto, como se mostra aqui: {textStyle: {color: '#FF0000'}, showColorCode: true} Tipo: objecto
Default: null
|
tooltip.ignoreBounds |
If set to tipo: booleano
Default: false
|
tooltip.isHtml |
If set to true, use HTML-rendered (rather than SVG-rendered) tooltips. Veja personalizar o conteúdo da dica para mais detalhes. Nota: A personalização do conteúdo da dica HTML através da coluna de dados da ferramenta não é suportada pela visualização do Gráfico de bolhas. tipo: booleano
Default: false
|
tooltip.showColorCode |
If true, show colored squares next to the slice information in the tooltip., tipo: booleano
Default: false
|
tooltip.texto |
Que informação Mostrar quando o utilizador paira sobre uma fatia de tarte. São suportados os seguintes valores:
tipo: string
Default: ‘both’
|
tooltip.,textStyle |
An object that specifies the tooltip text style. The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
tooltip.,despoleta |
a interacção do utilizador que faz com que a dica seja apresentada:
Tipo: Cadeia de caracteres
Default: ‘focus’
|
largura |
Métodos
Método | |
---|---|
draw(data, options) |
Desenha o gráfico. O gráfico aceita chamadas de métodos adicionais apenas após o evento tipo de retorno: nenhum
|
getAction(actionID) |
|
getBoundingBox(id) |
|
getChartAreaBoundingBox() |
Devolve um objecto que contém a esquerda, o topo, a largura e a altura do conteúdo da carta (i.e.,, excluindo-se os rótulos e legenda):
Os valores são relativos ao recipiente do gráfico. Chama isto depois de o gráfico ser desenhado. tipo de retorno: objecto
|
getChartLayoutInterface() |
Devolve um objecto que contém informações sobre a colocação no ecrã da carta e dos seus elementos., Os seguintes métodos podem ser chamado no objeto retornado:
esta Chamada depois que o gráfico é desenhado. Tipo de Retorno: o objeto
|
getHAxisValue(position, optional_axis_index) |
Retorna a lógica horizontal, do valor de exemplo: . chame isto após o gráfico ser desenhado. Tipo de Retorno: número
|
getImageURI() |
Retorna o gráfico serializado como uma imagem URI. chame isto após o gráfico ser desenhado. Ver gráficos PNG impressos. Return Type: string
|
getSelection() |
|
getVAxisValue(position, optional_axis_index) |
Devolve o valor vertical lógico em exemplo: chame isto após o gráfico ser desenhado. Tipo de Retorno: número
|
getXLocation(position, optional_axis_index) |
Retorna a tela de coordenada x de exemplo: chame isto após o gráfico ser desenhado. Tipo de Retorno: número
|
getYLocation(position, optional_axis_index) |
Retorna a tela de coordenada y exemplo: chame isto após o gráfico ser desenhado. Tipo de Retorno: número
|
removeAction(actionID) |
Remove a descrição ação com o pedido Return Type:
none |
setAction(action) |
|
setSelection() |
Seleciona o especificado gráfico entidades. Cancela qualquer selecção anterior. Entidades selecionáveis são fatias e entradas de legenda. Para este gráfico, apenas uma entidade pode ser selecionada de cada vez. Tipo de Retorno: none
|
clearChart() |
Limpa o gráfico, e libera todos os seus recursos alocados. Tipo de Retorno: none
|
Eventos
Para mais informações sobre como usar esses eventos, consulte Básicos de Interatividade, Manipulação de Eventos, e Eventos de acionamento.
Nome | |
---|---|
click |
Acionado quando o usuário clica no interior do gráfico., Pode ser usado para identificar quando o título, elementos de dados, entradas de legenda, eixos, gridlines ou etiquetas são clicados. Propriedades: targetID
|
error |
Acionado quando ocorre um erro ao tentar processar o gráfico. Properties: id, message
|
onmouseover |
|
onmouseout |
Acionado quando o usuário ratos longe de um visual entidade. Devolve a linha e os índices de coluna do elemento da tabela de dados correspondente. Um item de fatia ou legenda correlaciona-se com uma linha da tabela de dados (o índice de colunas é nulo). Properties: row, column
|
ready |
|
select |
disparou quando o utilizador clica numa entidade visual. Para saber o que foi selecionado, chame Properties: none
|
Data Policy
All code and data are processed and rendered in the browser., Não são enviados dados para nenhum servidor.