A custom embedded marker for a LegendItem in a flex chart

Question

I've been working with the flex charting component and I want to embed a custom icon for the marker in the legend. I've run into some strange behaviour where if set directly the icon is mirrored and the text is misaligned but if created using the a class factory and the legendMarkerRenderer property the component renders fine. I've included a snippet to illustrate the problem below.

Working around this problem may be possible but I'm curious if anyone has an explanation as to what could be going on here.

Additional info: Flex SDK 4.5.0.20967, FlashBuilder 4.5

This is the output of the below snippet:

Application Snippet

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
    <![CDATA[
        import mx.charts.LegendItem;

        [Embed(source="/resources/GraphResetIcon.png")]
        public static var icon:Class;
    ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <!-- This works fine -->
    <mx:LegendItem legendMarkerRenderer="{new ClassFactory(icon)}" markerAspectRatio="1" 
        labelPlacement="right" label="Texty texty" markerHeight="11" markerWidth="11" />

    <!-- This does not work -->
    <mx:LegendItem marker="{new icon()}" markerAspectRatio="1" labelPlacement="right"     
        label="Texty texty" markerHeight="11" markerWidth="11" />

</s:Application>

Though I still don't know why embedding an image directly into the marker doesn't work I've found a workaround where wrapping the embed in an image and setting the image to the marker will make the layout function correctly. — Gizmo490, Aug 17 '11 at 13:32

Amy Blankenship · Accepted Answer · 2011-08-17T14:07:01.160

Try

<mx:LegendItem marker="{icon}" markerAspectRatio="1" labelPlacement="right"              label="Texty texty" markerHeight="11" markerWidth="11" />

Edit:

I dug out my backup hard drive, and here is what works for me

//button icons          
[Embed(source='com/magnoliamultimedia/assets/guess.png')]
private var guessIcon:Class;
[Embed(source='com/magnoliamultimedia/assets/half_guess.png')]
private var halfGuessIcon:Class;
[Embed(source='com/magnoliamultimedia/assets/not_guess.png')]
//bitmapasset for markers
[Bindable]
private var _guessBA:BitmapAsset;
[Bindable]
private var _halfGuessBA:BitmapAsset;
[Bindable]
private var _notGuessBA:BitmapAsset;

///...
private function init():void{
    _guessBA = BitmapAsset(new guessIcon());
    _halfGuessBA = BitmapAsset(new halfGuessIcon());
    _notGuessBA= BitmapAsset(new notGuessIcon());
    _markerHeight = _guessBA.height*.75;
    _markerWidth = _guessBA.width*.75;
    legend.visible = true;
}
//...
<mx:Canvas id="legend" width="{Application.application.width}" height="75" 
    backgroundColor="#FFFFFF" visible="false">
    <mx:constraintColumns>
        <mx:ConstraintColumn id="rowName" width="20%" />
        <mx:ConstraintColumn id="legend1" width="25%" />
        <mx:ConstraintColumn id="legend2" width="25%" />
        <mx:ConstraintColumn id="legend3" width="25%" />
    </mx:constraintColumns>
    <mx:constraintRows>
        <mx:ConstraintRow id="colors" />
        <mx:ConstraintRow id="icons" />
    </mx:constraintRows>
    <!--color legends-->
    <mx:LegendItem label="Colors:" id="colorCol1" visible="false"
            top="colors:10" left="rowName:10" right="legend1:10" fill="{noFill}"
            markerHeight="0" markerWidth="0" />
    <mx:LegendItem label="Correct" id="colorCol2" visible="false"
            top="colors:10" left="legend1:10" right="legend2:10" 
            fill="{greenFill}" stroke="{outline}" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
    <mx:LegendItem label="Wrong" id="colorCol3" visible="false"
            top="colors:10" left="legend2:10" right="legend3:10" 
            fill="{redFill}" stroke="{outline}" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
    <mx:LegendItem label="Not Attempted" id="colorCol4" visible="false"
            top="colors:10" left="legend3:10" 
            fill="{defaultFill}" stroke="{outline}" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
    <mx:HRule id="separator" top="icons:5" left="10" right="10" visible="false" />
        <!--icon legends-->
        <mx:LegendItem label="Icons:" 
            top="icons:10" left="rowName:10" right="legend1" fill="{noFill}" 
            markerHeight="0" markerWidth="0" />
        <mx:LegendItem label="Guess" 
            top="icons:10" left="legend1:10" right="legend2:10" 
            marker="{_guessBA}" markerAspectRatio="1" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
        <mx:LegendItem label="Half Guess" 
            top="icons:10" left="legend2:10" right="legend3:10" 
            marker="{_halfGuessBA}" markerAspectRatio="1" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
        <mx:LegendItem label="Not A Guess" 
            top="icons:10" left="legend3:10" 
            marker="{_notGuessBA}" markerAspectRatio="1" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
</mx:Canvas>
<!--legend colors-->
<mx:SolidColor id="redFill" color="0x990000" />
<mx:SolidColor id="greenFill" color="0x003300" />
<mx:SolidColor id="defaultFill" color="0xE6EEEE" />
<mx:SolidColor id="noFill" color="0xE6EEEE" alpha="0" />
<mx:Stroke id="outline" color="0" weight="1" />

In principle, this is almost the same as what you started out with, but I explicitly cast the newly created Class instance to BitmapAsset.

You can't bind a class or a class factory to the instance (marker) only the the style (legendMarkerRenderer). I'm fairly sure that this is a bug in the flex sdk I was mostly asking to find out if any one knows what/where the bug is. I phrased the sample like this because if you dig through the code for the legend the second approach is the mxml equivalent of how the LegendItem is being created by the Legend class. Thanks though :) — Gizmo490, Aug 16 '11 at 14:11
Casting the embeded asset to a BitmapAsset fixes the issue. Thanks so much! — Gizmo490, Aug 17 '11 at 13:58

A custom embedded marker for a LegendItem in a flex chart

1 Answers1