Welcome to Our Website

Visualization: Pie Chart

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 is3Dopçõ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

Whether the chart lance user-based events or reacts to user interaction. Se for falso, o gráfico não irá lançar ‘select’ ou outros eventos baseados em interacção (mas irá lançar eventos prontos ou de erro), e não irá mostrar o hovertext ou alterar de outra forma, dependendo da entrada do utilizador.,

tipo: booleano
Default: true

o tamanho de letra por omissão, em pixels, de todo o texto do gráfico. Você pode sobrepor isto usando propriedades para elementos de gráfico específicos.

Type: number
Default: automatic

the default font face for all text in the chart. Você pode sobrepor isto usando propriedades para elementos de gráfico específicos.

Tipo: string
Padrão: ‘Arial’

um objecto com membros para configurar vários aspectos da legenda., Para especificar as propriedades deste objecto, poderá usar a notação literal do objecto, como mostrado aqui:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tipo: objecto
Default: null

Largura da carta, em pixels.,

Tipo: número
Padrão: largura do elemento que contém
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: 'red' ou '#00cc00', ou um objeto com as seguintes propriedades.,

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: chartArea:{left:20,top:0,width:'50%',height:'75%'}

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:
  • stroke: a cor, fornecida como uma cadeia hexadecimal ou nome de cor em inglês.
  • strokeWidth se fornecido, desenha uma borda ao redor da área do gráfico da largura (e com a cor de stroke).
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: colors:.

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’ – alinhado com o início da área atribuída à legenda.
  • ‘center’ – centrado na área atribuída para a legenda.
  • ‘end’ – alinhado com o fim da área atribuída à legenda.,

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:

  • ‘bottom’ – mostra a legenda por baixo do gráfico.
  • ‘etiquetado’ – desenha linhas que ligam as fatias aos seus valores de dados.
  • ‘left’ – mostra a legenda à esquerda do gráfico.
  • ‘none’ – não mostra nenhuma legenda.
  • ‘direita’ – mostra a legenda à direita do gráfico.
  • ‘top’ – mostra a legenda acima do gráfico.
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> } 

color pode ser qualquer cor HTML de seqüência de caracteres, por exemplo: 'red' ou '#00cc00'. Also see fontNameandfontSize.,

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 number vezes o raio da carta.

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:

  • “percentagem” – a percentagem da dimensão da fatia do total.
  • “valor” – o valor quantitativo da fatia.
  • ‘label’ – o nome da fatia.
  • ‘none’ – não é apresentado nenhum texto.
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>}

color pode ser qualquer cor HTML de seqüência de caracteres, por exemplo: 'red' ou '#00cc00'. Also see fontNameandfontSize.

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 0 irá orientar a extremidade esquerda da primeira fatia directamente para cima.,

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, {}). Se uma fatia ou um valor não for especificado, o valor global será usado., Cada objeto suporta as seguintes propriedades:

  • color – a cor a usar para esta fatia. Indique um texto de cores HTML válido.
  • offset – a que distância separar a fatia do resto da torta, de 0.0 (não de todo) a 1.0 (raio da torta).
  • textStyle – sobrepõe o global pieSliceTextStyle para esta fatia.,

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 color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

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 true, allows the drawing of tooltips to flow outside of the bounds of the chart on all sides. Nota: Isto só se aplica às dicas HTML. Se isto estiver activo com as dicas de SVG, qualquer excesso fora dos limites do gráfico será recortado. Veja personalizar o conteúdo da dica para mais detalhes.,

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:

  • ‘both’ – mostra tanto o valor absoluto da fatia como a percentagem do todo.
  • ‘valor’ – Mostrar apenas o valor absoluto da fatia.
  • ‘percentagem’ – indicar apenas a percentagem do todo representada pela fatia.
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 color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

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:

  • ‘foco’ – a dica será apresentada quando o utilizador passar sobre o elemento.
  • ‘none’ – a dica não será mostrada.
  • ‘selecção’ – a dica será apresentada quando o utilizador seleccionar o elemento.
Tipo: Cadeia de caracteres
Default: ‘focus’
largura

Métodos

Devolve o objecto de acção da dica com o actionID.,

tipo de retorno: objecto

Devolve um objecto que contém o elemento Carta esquerda, topo, largura e altura id., O formato id ainda não está documentada (eles são os valores de retorno de manipuladores de eventos), mas aqui estão alguns exemplos:

var cli = chart.getChartLayoutInterface();
Altura da área do gráfico cli.getBoundingBox('chartarea').height Largura da terceira barra na primeira série de um gráfico de barras ou colunas cli.getBoundingBox('bar#0#2').width caixa Delimitadora da quinta da cunha de um gráfico de pizza cli.getBoundingBox('slice#4') Caixa delimitadora dos dados do gráfico de uma vertical (por exemplo, coluna) gráfico: cli.getBoundingBox('vAxis#0#gridline') caixa Delimitadora dos dados do gráfico de uma horizontal (por exemplo,,, bar) chart:

os valores são relativos ao contêiner do gráfico. Chama isto depois de o gráfico ser desenhado.

tipo de retorno: objecto

devolve uma lista das Entidades de gráficos seleccionadas. Entidades selecionáveis são fatias e entradas de legenda. Para este gráfico,apenas uma entidade pode ser selecionada em qualquer momento., Extended description .

Return Type: Array of selection elements

define uma acção da dica a ser executada quando o utilizador clica no texto da acção.

The setAction method takes an object as its action parameter. Este objeto deve especificar 3 propriedades: id— a IDENTIFICAÇÃO da ação a ser definido, text —o texto que deve aparecer na dica de ferramenta para a ação, e action — a função que deve ser executado quando o usuário clicar sobre a ação de texto.,

qualquer e todas as ações da dica devem ser definidas antes de chamar o método draw(). Descrição alargada.

Tipo de Retorno: none
Método
draw(data, options)

Desenha o gráfico. O gráfico aceita chamadas de métodos adicionais apenas após o eventoreadyser disparado. Extended description.

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):

var cli = chart.getChartLayoutInterface();
cli.getChartAreaBoundingBox().left cli.getChartAreaBoundingBox().top cli.getChartAreaBoundingBox().height cli.getChartAreaBoundingBox().width

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:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

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 position, que é um deslocamento a partir do gráfico do recipiente borda esquerda. Pode ser negativo.,

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 emposition, que é um desvio do bordo superior do contentor do gráfico. Pode ser negativo.

exemplo:chart.getChartLayoutInterface().getVAxisValue(300).

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 position em relação ao gráfico do recipiente.,

exemplo: chart.getChartLayoutInterface().getXLocation(400).

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 position em relação ao gráfico do recipiente.

exemplo: chart.getChartLayoutInterface().getYLocation(300).

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 actionID a partir do gráfico.,

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. Extended description .,

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.

disparado quando o utilizador invade uma entidade visual. 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).,

Propriedades: linha, coluna

The chart is ready for external method calls., Se você quiser interagir com o gráfico, e os métodos de chamada depois de desenhá-lo, você deve configurar um ouvinte para este evento antes de chamar o método draw, e chamá-los apenas após o evento foi disparado.

propriedades: nenhuma
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 getSelection().

Properties: none

Data Policy

All code and data are processed and rendered in the browser., Não são enviados dados para nenhum servidor.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *