Visualização: gráfico de pizza

A cor de plano de fundo da área principal do gráfico. Pode ser uma string de cor HTML simples, por exemplo: 'red' ou '#00cc00', ou um objeto com as propriedades a seguir.

A cor da borda do gráfico, como uma string de cor HTML.

A largura da borda, em pixels.

A cor de preenchimento do gráfico, como uma string de cor HTML.

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

• stroke: a cor, fornecida como uma string hexadecimal ou nome da cor em inglês.
• strokeWidth: se fornecido, desenha uma borda ao redor da área do gráfico com a largura especificada (e com a cor stroke).

A distância da borda esquerda a desenhar o gráfico.

Indica a distância entre a borda superior e o gráfico a partir da borda superior.

Largura da área do gráfico.

Altura da área do gráfico.

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: colors:['red','#004411'].

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.

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.

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.

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.

Altura do gráfico, em pixels.

Se verdadeiro, exibe um gráfico tridimensional.

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}}

Alinhamento da legenda. Será um dos seguintes valores:

• "start": alinhado ao início da área alocada para a legenda.
• "center": centralizado na área alocada para a legenda.
• "end" - alinhado ao fim da área alocada para a legenda.

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".

Posição da legenda. Será um dos seguintes valores:

• "bottom" - exibe a legenda abaixo do gráfico.
• "labeled" - desenha linhas que conectam fatias aos seus valores de dados.
• "esquerda" - exibe a legenda esquerda do gráfico.
• "none" - não exibe legenda.
• "right" - exibe a legenda à direita do gráfico.
• "top" - exibe a legenda acima do gráfico.

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".

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 color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Se estiver entre 0 e 1, mostra um gráfico de rosca. O buraco com um raio igual a number vezes o raio do gráfico.

A cor das bordas das fatias. Aplicável apenas quando o gráfico é bidimensional.

O conteúdo do texto exibido na fatia. Será um dos seguintes valores:

• "percentage" - a porcentagem do tamanho da fatia em relação ao total.
• "valor" - o valor quantitativo da fatia.
• "rótulo" - o nome da fatia.
• "none" - Nenhum texto é exibido.

Um objeto que especifica o estilo de texto da fatia. O objeto tem este formato:

{color: <string>, fontName: <string>, fontSize: <number>}

O color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

O ângulo, em graus, para girar o gráfico. O padrão de 0 orienta a borda mais esquerda da primeira fatia diretamente para cima.

Se verdadeiro, desenha fatias no sentido anti-horário. O padrão é desenhar no sentido horário.

Cor da fração de combinação que contém todas as fatias abaixo de sliceVisibilityThreshold.

Um rótulo para a fração de combinação que contém todas as frações abaixo de sliceVisibilityThreshold.

Uma matriz de objetos, cada um descrevendo o formato da fatia correspondente da pizza. Para usar valores padrão em uma fração, especifique um objeto vazio (por exemplo, {}). Se uma fração ou um valor não for especificado, o valor global será usado. Cada objeto é compatível com as seguintes propriedades:

• color: a cor a ser usada nessa fatia. Especifique uma string de cor HTML válida.
• offset: a distância entre a fatia e o restante da pizza, de 0,0 (nenhuma) até 1,0 (o raio da pizza).
• textStyle: substitui o pieSliceTextStyle global desta fração.

É possível especificar uma matriz de objetos, cada um sendo aplicado à fração na ordem determinada, ou especificar um objeto em que cada filho tenha uma chave numérica que indique a qual fração se aplica. Por exemplo, as duas declarações a seguir são idênticas e declaram a primeira fração como preta e a quarta como vermelha:

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
      

O valor fracionário da pizza, abaixo do qual uma fatia não será exibida individualmente. Todas as fatias que não ultrapassaram esse limite serão combinadas em uma única fração "Outros", cujo tamanho é a soma de todos os respectivos tamanhos. O padrão é não mostrar individualmente qualquer fatia menor que meio grau.

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
      

Texto a ser exibido acima do gráfico.

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 color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

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}

Se definido como true, permite que o desenho de dicas flua fora dos limites do gráfico em todos os lados.

Observação:isso se aplica apenas a dicas de HTML. Se essa opção for ativada com dicas de SVG, qualquer estouro fora dos limites do gráfico será cortado. Consulte Como personalizar o conteúdo da dica para mais detalhes.

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.

Se verdadeiro, mostra quadrados coloridos ao lado das informações da fatia na dica.

Quais informações exibir quando o usuário passar o cursor sobre uma fatia de pizza. Os valores a seguir são compatíveis:

• "ambos": [Padrão] exibe o valor absoluto da fração e a porcentagem do todo.
• "value" - exibe apenas o valor absoluto da fatia.
• "percentage": exibe somente a porcentagem do todo representada pela fatia.

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 color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

A interação do usuário que faz com que a dica seja exibida:

• "focus": a dica é mostrada quando o usuário passa o cursor sobre o elemento.
• "nenhum" - a dica de ferramenta não será exibida.
• "selection": a dica de ferramenta será mostrada quando o usuário selecionar o elemento.

Largura do gráfico, em pixels.

Desenha o gráfico. O gráfico aceita outras chamadas de método somente depois que o evento ready é disparado. Extended description.

Retorna o objeto de ação da dica com o actionID solicitado.

Retorna um objeto que contém as informações de esquerda, parte superior, largura e altura do elemento id do gráfico. O formato de id ainda não está documentado (eles são os valores de retorno dos manipuladores de eventos), mas estes sã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 do quinto encaixe de um gráfico de pizza

cli.getBoundingBox('slice#4')

Caixa delimitadora dos dados de um gráfico vertical (por exemplo, coluna):

cli.getBoundingBox('vAxis#0#gridline')

Caixa delimitadora dos dados de um gráfico horizontal (por exemplo, de barras):

cli.getBoundingBox('hAxis#0#gridline')

Os valores são relativos ao contêiner do gráfico. Chame essa função depois que o gráfico for desenhado.

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

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left

cli.getChartAreaBoundingBox().top

cli.getChartAreaBoundingBox().height

cli.getChartAreaBoundingBox().width

Os valores são relativos ao contêiner do gráfico. Chame essa função depois que o gráfico for desenhado.

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:

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

Chame essa função depois que o gráfico for desenhado.

Retorna o valor de dados horizontal em xPosition, que é um deslocamento de pixel da borda esquerda do contêiner do gráfico. Pode ser negativo.

Exemplo: chart.getChartLayoutInterface().getHAxisValue(400).

Chame essa função depois que o gráfico for desenhado.

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.

Retorna uma matriz das entidades de gráfico selecionadas. As entidades selecionáveis são frações e entradas de legenda. Neste gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

Retorna o valor de dados vertical em yPosition, que é um deslocamento de pixel para baixo em relação à borda superior do contêiner do gráfico. Pode ser negativo.

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

Chame essa função depois que o gráfico for desenhado.

Retorna a coordenada x do pixel de dataValue em relação à borda esquerda do contêiner do gráfico.

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

Chame essa função depois que o gráfico for desenhado.

Retorna a coordenada y do pixel de dataValue em relação à borda superior do contêiner do gráfico.

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

Chame essa função depois que o gráfico for desenhado.

Remove a ação da dica com o actionID solicitado do gráfico.

Define uma ação de dica a ser executada quando o usuário clica no texto de ação.

O método setAction usa um objeto como parâmetro de ação. Esse objeto precisa especificar três propriedades: id, o ID da ação definida, text, o texto que aparecerá na dica da ação, e action, a função que será executada quando um usuário clicar no texto da ação.

Todas as ações de dica precisam ser definidas antes de chamar o método draw() do gráfico. Descrição estendida.

Seleciona as entidades de gráfico especificadas. Cancela qualquer seleção anterior. As entidades selecionáveis são frações e entradas de legenda. Neste gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

Limpa o gráfico e libera todos os recursos alocados.

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.

Disparado quando ocorre um erro ao tentar renderizar o gráfico.

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 fração ou legenda correlaciona-se a uma linha na tabela de dados (o índice da coluna é nulo).

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 entrada de fração ou legenda correlaciona-se a uma linha na tabela de dados (o índice da coluna é nulo).

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 draw e chame-o somente depois que o evento for disparado.

Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame getSelection().