Rendering Functions

In the case that one or more of these information is not explicitly available in the data, you can use the areaFunction, colorFunction, labelFunction and tooltipFunction properties to indicate to TreeMap the function it has to use to generate the corresponding information.

The following example shows how to use these properties:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:treemap="fr.kapit.components.treemap.*">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			[Bindable]private var myDataProvider:ArrayCollection = new ArrayCollection([ 
	    		{itemLabel:"Item 1", itemArea:500, itemTooltip:"Tooltip 1"},  
	    		{itemLabel:"Item 2", itemArea:400, itemTooltip:"Tooltip 2"},  
	    		{itemLabel:"Item 3", itemArea:100, itemTooltip:"Tooltip 3"}, 
			]); 

			private function myLabelFunction(item:Object, info:Object):String 
			{ 
			    var label:String = "This is : "+item["itemLabel"]; 
			    return label; 
			}
			
			private function myAreaFunction(item:Object):Number 
			{ 
			    var area:Number = 100/item["itemArea"]; 
			    return area; 
			}
			
			private function myColorFunction(item:Object):Number 
			{ 
			    var color:Number = 100/item["itemArea"]; 
			    return color; 
			} 
		
			private function myTooltipFunction(item:Object, info:Object):String 
			{ 
			    var tooltip:String = "Name : "+item["itemLabel"]+"\nArea : "+item["itemArea"]+"\nColor : "+item["itemColor"]; 
			    return tooltip; 
			} 
		]]>
	</mx:Script>
	
	<treemap:TreeMap id="myTreeMap"
		dataProvider="{myDataProvider}" 
		labelField="itemLabel" labelFunction="myLabelFunction"
		areaField="itemArea" areaFunction="myAreaFunction" 
		colorField="itemColor" colorFunction="myColorFunction"
		toolTipField="itemTooltip" toolTipFunction="myTooltipFunction"
		width="100%" height="80%"/>
		
	<treemap:TreeMapLegend treeMap="{myTreeMap}" width="100%" height="20%" />
		 
</mx:Application>