The following example shows how you can set the horizontal and vertical gaps on a Flex Legend control by setting the horizontalGap and verticalGap styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_horizontalGap_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="horizontalGap:">
<mx:HSlider id="sliderHGap"
minimum="0"
maximum="100"
snapInterval="1"
tickInterval="25"
liveDragging="true"
dataTipPrecision="0" />
</mx:FormItem>
<mx:FormItem label="verticalGap:">
<mx:HSlider id="sliderVGap"
minimum="0"
maximum="100"
snapInterval="1"
tickInterval="25"
liveDragging="true"
dataTipPrecision="0" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
height="100%"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data"
nameField="@label" />
</mx:series>
</mx:PieChart>
<mx:ControlBar width="100%">
<mx:Legend dataProvider="{pieChart}"
direction="horizontal"
horizontalGap="{sliderHGap.value}"
verticalGap="{sliderVGap.value}"
width="100%" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
You can also set the horizontalGap and verticalGap styles in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_horizontalGap_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
Legend {
horizontalGap: 100;
verticalGap: 30;
}
</mx:Style>
<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
height="100%"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data"
nameField="@label" />
</mx:series>
</mx:PieChart>
<mx:ControlBar width="100%">
<mx:Legend dataProvider="{pieChart}"
direction="horizontal"
width="100%" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
Or, you can set the horizontalGap and verticalGap styles using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_horizontalGap_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function sliderHGap_change(evt:SliderEvent):void {
legend.setStyle("horizontalGap", evt.value);
}
private function sliderVGap_change(evt:SliderEvent):void {
legend.setStyle("verticalGap", evt.value);
}
]]>
</mx:Script>
<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="horizontalGap:">
<mx:HSlider id="sliderHGap"
minimum="0"
maximum="100"
value="8"
snapInterval="1"
tickInterval="25"
liveDragging="true"
dataTipPrecision="0"
change="sliderHGap_change(event);" />
</mx:FormItem>
<mx:FormItem label="verticalGap:">
<mx:HSlider id="sliderVGap"
minimum="0"
maximum="100"
value="6"
snapInterval="1"
tickInterval="25"
liveDragging="true"
dataTipPrecision="0"
change="sliderVGap_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
height="100%"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data"
nameField="@label" />
</mx:series>
</mx:PieChart>
<mx:ControlBar width="100%">
<mx:Legend id="legend"
dataProvider="{pieChart}"
direction="horizontal"
width="100%" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
0 Responses to “Setting the horizontal and vertical gaps on a Legend control in Flex”
Leave a Reply