Facilitando a visualização em gráficos de linha

Um gráfico no Flex é constituído por séries que são representações gráficas um valor de um determinado ítem. Por exemplo: um gráfico de pizza tem apenas uma série, onde cada fatia representa um valor de ítens similares (percentual de alunos entre 10 e 15 anos, entre 15 e 20, etc); um gráfico de barra pode ter duas colunas representando o valor de um mesmo ítem em anos diferentes (vendas de banana em 2004 e 2005, vendas de abacaxi em 2004 e 2005, etc), por exemplo.


O elemento principal para customizar um gráfico é o renderer, que é um elemento que define a aparência e formato de uma série, e pode conter outras propriedades, como preenchimento, contorno, transparência, etc.

lineseries_pointrenderer1.jpg
Uma propriedade muito interessante das series de linha (mx:LineSeries) é o pointRenderer que permite utilizar um segundo renderer (além do padrão para a série em linha) para indicar os valores.

Há séries em que faz muito sentido configurar a linha para ser desenha em forma curva, mas eventualmente fica complicado distinguir onde está realmente localizado aquele valor. Veja no gráfico abaixo, onde propositalmente uma série está reta e na outra, curva, como pode ficar difícil de um usuário identificar o ponto onde o valor é efetivamente definido. O “tool tip” inclusive só aparece que o usuário passar o mouse exatamente naquele ponto, mais facilmente identificável quando as linhas retas.

lineseries_pointrenderer2.jpg
Utilizando o pointRenderer, o código para uma das séries ficou o seguinte:


< mx:LineSeries name=“Previsto” yField=“valorPrevisto” pointRadius=“5” form=“curve”>
    < mx:stroke>
        < mx:Stroke color=“0x1082AD” weight=“2” alpha=“90” />
    < /mx:stroke>
    < mx:pointRenderer>
        < mx:DiamondRenderer />
    < /mx:pointRenderer>
    < mx:pointFill>
        < mx:SolidColor color=“0xFFFFFF” />
    < /mx:pointFill>
    < mx:pointStroke>
        < mx:Stroke color=“0x1082AD” weight=“2” alpha=“90” />
    < /mx:pointStroke>
< /mx:LineSeries>

No exemplo acima, a propriedade stroke (em minúsculo!) foi definida utilizando a classe Stroke (inicial maíuscula!), que é cor da linha. O pointRenderer utilizado foi o DiamondRenderer; dentre outras possibilidades, incluem-se o CircleRenderer e o CrossRenderer. As propriedades pointFill e o pointStroke definem, respectivamente, o preenchimento e o contorno do pointRenderer definido.

O resultado ficou o seguinte:

lineseries_pointrenderer3.jpg
A customização de gráficos no tocante ao visual não limita-se apenas ao look and fell agradável, mas também ajuda a construir melhores maneiras de visualizar as informações.


7 comments

  1. luzineide on 23.abr.07 at 12:04 am

    para estudar

  2. rosana evangelista de sousa on 30.maio.07 at 12:08 pm

    eu preciso de um grafico de coluna e linha para q eu possa dar uma aula
    no dia 6 quarta feira e não sei como explicar esses graficos
    vou tentar explicar
    e vendas no leste da asia mais são assim
    60,000 50,000,40,000 30,000 20,000 10,000 do lado em baixo
    1trimestre e vai ate 4trimdo outro lado 2004 e 2005
    e o de linha so coloca 70,00 q e o primeiro em baixo e a mesma coisa
    do outro ladoso q e europa eua japão
    mim ajuda por favor so quero de uma explicação de cada uma para q eu possa entender vcs mandando a sua explicação eu posso explicar por ela

  3. ana lucia on 7.abr.08 at 9:40 pm

    Necessito urgente de definições e exemplos de graficos de linhas, barras/ barras duplas, colunas/ colunas duplas, setores e pictogramas pra um seminário que tenho na quarta-feira. por favor me ajudem?? Valeu!!

  4. giovanna dos santos de souza on 25.abr.08 at 4:09 pm

    eu queria saber sobre oque é este gráfico?

  5. Eveliny leticia Moreira de Toledo on 14.set.09 at 3:52 pm

    um grande setro de pesquisa para todos…

  6. anonima on 17.nov.13 at 12:51 pm

    bom, ajudou mais preciso de mais definições para o Gráfico de Barras Duplas…Obg!!

  7. Daiana on 16.jun.17 at 1:24 pm

    Oi pessoal, eu preciso fazer um gráfico duplo, que coloque o 1 e o 2 semestre

Leave a Comment