Trabalho de Pesquisa dos componentes do Java PrimeFaces Aluna: Natiele K. M. Canabarro e Silva

Pie Chart

O gráfico "Pie" ou "Torta" exibe as informações num gráfico em forma de uma torta conforme

a Figura 1:

Figura 1. Exemplo de um Pie Chart.

Os principais atributos do Pie Chart são: "id" identifica unicamente o componente, "rendered"

especifica a renderização do componente na qual se for falso não exibe o componente, "value"

deve ser do tipo ChartModel que é definido no bean e exibe as informações no gráfico, "style"

define informações sobre o estilo do gráfico como largura e altura, "title" define o título do

gráfico, "legendPosition" define a posição da legenda no gráfico, "seriesColors" define as

cores do gráfico no formato hexadecimal, "diameter" define o diâmetro do gráfico, porém se

não definirmos nenhum valor ele calcula automaticamente o diâmetro mais adequado,

"sliceMargin" define a distância entre as fatias do gráfico, "showDataLabels" mostra a

informação em cada pedaço do gráfico, "dataFormat" espera um String para definir o formato

das informações (o padrão é "percent"), "extender" define uma função no lado cliente para

estender as funcionalidades do gráfico com opções de mais baixo nível.

A classe principal do Pie Chart é a “org.primefaces.model.chart.PieChartModel” e para exibir

o gráfico na página utilizamos a tag presente na Listagem 2.

<p:pieChart value="#{bean.model}" legendPosition=”w” />

Line Chart

O gráfico de linha é utilizado para visualizarmos uma ou mais séries de informações em um

gráfico de linha, conforme mostra a Figura 2.

Figura 2. Exemplo de um Line Chart.

Os principais atributos do Line Chart são: "id" para identificar unicamente um componente,

"value" deve ser do tipo ChartModel e contém as informações a serem exibidas no gráfico,

"title" exibe o título do gráfico, "legendPosition" define a posição da legenda no gráfico, os

atributos "minY", "maxY", "minX" e "maxX" definem os valores mínimos e máximos para cada

um dos eixos, "seriesColors" define a cor das linhas do gráfico em forma hexadecimal,

"shadow" define uma sombra no gráfico, "fill" é utilizado se quisermos preencher o gráfico

abaixo das linhas, "xaxisLabel" para rotular o eixo x, "yaxisLabel" para rotular o eixo y,

"animate" para animar o gráfico quando for impresso na tela.

Se definirmos os valores “fill” e “stacked” como “true” poderemos ter como resultado um

gráfico um pouco diferente do gráfico acima. Segue na Figura 3 como ficaria o gráfico com

esses dois valores definidos:

Figura 3. Exemplo de um Line Chart com os atributos fill e stacked definidos.

A classe principal é a “org.primefaces.model.chart.CartesianChartModel” e para exibir o

gráfico na página utilizamos a tag presente na Listagem 3.

Listagem 3. Exemplo de como exibir um Line Chart na página.

<p:lineChart value="#{bean.model}" legendPosition="e" />

AutoComplete

O AutoComplete, como diz o nome, completa uma informação que o usuário está digitando em

um input. Assim como no google, é possível ter esse mesmo comportamento com o

Primefaces. Veja na imagem 21.8 e 21.9 como fica esse componente.

Esse componente é altamente configurável e deve ser utilizado com cautela.