Utilizando o Google Charts – Parte 4: Exibindo os Valores dos Dados

Aproveitando uma dúvida que me enviaram estou escrevendo esta pequena dica. Conhecemos bem algumas interatividades dos gráficos, como por exemplo mostrar uma caixa do tipo ToolTip ao posicionar o mouse sobre as séries. Porém as vezes necessitamos que os valores dos dados estejam sempre em exibição junto com as linhas ou colunas, para que o usuário tenha uma rápida interpretação dos dados.

Em outras linguagens isso é uma tarefa muito simples (como o showDataTips do Adobe Flex), mas com o Goole Charts precisamos de um pouco mais de linhas de código, embora não seja impossível.

Publicidade

Implementar ToolTip com HTML em qualquer componente em Adobe Flex

Como sabemos nem todos componentes em Adobe Flex permitem criar ToolTip com caracteres de formatação HTML. Algumas vezes isso pode ser um pequeno impecilho.

 

 

 

 

 

 

Depois de pesquisar um pouco encontrei a seguinte solução.

Basicamente trata-se de substituir a classe que gerencia as propriedades de ToolTip por uma classe que recebe HTML Texto.
Primeiro criamos uma classe extendida da classe ToolTip:

package asClass
{
 import mx.containers.*;
 import mx.controls.Text;
 import mx.controls.ToolTip;
 import mx.core.*;

 public class HTMLToolTip extends ToolTip
 {
 public function HTMLToolTip()
 { super(); }

 override protected function commitProperties():void{
 super.commitProperties();
 textField.htmlText = text;
 }
 }
}

Em seguida devemos atribuir nossa classe ao Gerenciador de ToolTip no início de nossa aplicação:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

<mx:Script>
 <![CDATA[

import mx.managers.ToolTipManager;
import asClass.HTMLToolTip;
<span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: small;"><span style="line-height: 19px;">
</span></span> private function init():void {

 //Substituindo a classe do Gerenciador de ToolTip pela nossa classe
 ToolTipManager.toolTipClass = HTMLToolTip;
 //Atribuindo o texto ao compoennte
 btn.toolTip = "Button em Flex com <b>HTML</b>\nE quebra de linha.";

 }

 ]]>
 </mx:Script>
 <mx:Button id="btn" y="40" label="Implementando ToolTip" horizontalCenter="0"/>

</mx:Application>

Desta forma qualquer componente passa a aceitar texto de ToolTip com tags HTML.

 

 

 

 

 

Espero que a dica seja útil! Abraços!!!