Back-End

9 fev, 2015

Como personalizar gráficos com JFree

Publicidade

O JFree Chart é uma biblioteca de gráficos de código aberto para a JVM. Ele tem estado por aí há muito tempo, possui um monte de opções e é capaz de gerar alguns gráficos realmente excelentes.

Dito isso, sua saída padrão não é muito boa. Existe uma boa quantidade de ruído visual e as escolhas de cores padrão poderiam ser melhores. Assim, neste artigo, vou explicar como personalizar seu gráfico JFree para parecer limpo e moderno.

1. Gerando gráfico básico

Vamos começar gerando um gráfico de barras simples:

Integer width = 500, height = 300
 
JFreeChart chart = ChartFactory.createBarChart(
    "",                         // chart title
    "",                         // domain axis label
    "",                         // range axis label
    createDataset(),            // data
    PlotOrientation.VERTICAL,   // orientation
    true,                       // include legend
    true,                       // tooltips?
    false                       // URLs?
)
 
ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection())
ChartUtilities.saveChartAsPNG(new File("bar-chart.png"), chart, width, height, info)

É assim que a saída fica:

jfree-1

Embora não seja terrível, existem alguns problemas:

  • bordas desnecessários para gráfico geral, área de desenho e rótulo
  • preenchimento de gradiente desnecessário para as barras
  • fundo cinza desnecessário do gráfico
  • o esquema de cores padrão não é esteticamente agradável (pelo menos aos meus olhos)
  • os valores da legenda estão espremidos

Então, vamos consertar?

2. Formatação da área de plotagem

Vamos começar limpando a área de plotagem. Em particular, vamos nos livrar de várias linhas, bem como daquele fundo cinza:

CategoryPlot plot = chart.categoryPlot
plot.backgroundPaint = Color.white
plot.domainGridlinePaint = Color.white
plot.rangeGridlinePaint = Color.white
plot.outlineVisible = false

É assim que o gráfico vai ficar agora:

jfree-2

3. Formatar as barras

Em seguida, vamos tornar as barras mais bonitas. Vamos remover o gradiente e alterar as cores padrão:

// remove the gradient fill
plot.renderer.gradientPaintTransformer = null          
plot.renderer.barPainter = new StandardBarPainter()
 
Paint[] colors = [
    new Color(0, 172, 178),      // blue
    new Color(239, 70, 55),      // red
    new Color(85, 177, 69)       // green
]
 
// change the default colors
for (int i = 0; i < 4; i++) {
    plot.renderer.setSeriesPaint(i, colors[i % colors.length])
}

O nosso gráfico agora vai ficar assim:

jfree-3

4. Formatar a legenda

O próximo item na nossa lista de alvos é a lenda. Existem muitas maneiras de formatar a legenda, mas vou focar (1) remover a borda e separá-la com cobertura extra e (2) dar a cada item a sua própria linha. Observe que a segunda correção nos obrigará a aumentar a altura do gráfico (no meu exemplo, vou aumentá-lo de 300px para 400px).

Aqui está o código:

chart.legend.frame = BlockBorder.NONE
chart.legend.itemLabelPadding = new RectangleInsets(5.0, 2.0, 10.0, width)
chart.legend.padding = new RectangleInsets(20.0, 20.0, 0.0, 0.0)

Embora não pareça ser uma opção colocar automaticamente os itens da legenda em linhas separadas, tem um truque que você pode usar. Ele consiste em definir o preenchimento certo em algo grande, como a largura do gráfico.

Ok, é assim que o nosso gráfico de agora vai ficar:

jfree-4

5. Removendo ainda mais a desorganização

Para a etapa final, vou simplificar ainda mais o gráfico, me livrando da faixa de valores do eixo Y, colocando os rótulos diretamente nas barras. Além disso, vou tornar os rótulos de categoria menos pronunciados.

// add values to bars
plot.renderer.baseItemLabelGenerator = new StandardCategoryItemLabelGenerator()
plot.renderer.baseItemLabelsVisible = true
 
// hide y axis
NumberAxis rangeAxis = (NumberAxis) plot.rangeAxis
rangeAxis.visible = false
 
// format the x axis
CategoryAxis domainAxis = plot.domainAxis
domainAxis.tickLabelPaint = new Color(160, 163, 165)
domainAxis.categoryLabelPositionOffset = 4
domainAxis.lowerMargin = 0
domainAxis.upperMargin = 0
domainAxis.categoryMargin = 0.2

E aqui está o gráfico final:

jfree-5

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://tatiyants.com/how-to-customize-jfree-charts/