开发者

Labelfunction in Barseries along with plotseries

I have a Flec Bar chart. It has a Bar series. I need to show the datalabel at the tip of the bars. For this am using labelFunction.This works fine. Now I want to add a plotseries in the same chart. Once it is added the labelfunction in the bar series is not working. The labels are not visible.Any idea?Thanks

<mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml">          
  <mx:Script><![CDATA[
    import mx.charts.series.items.PlotSeriesItem;
    import mx.charts.series.items.BarSeriesItem;
    import mx.charts.ChartItem;
    import mx.controls.Label;   
    import mx.collections.ArrayCollection;  
    //Dataprovider for chart    
[Bindable]
 private var medalsAC:ArrayCollection = new ArrayCollection([
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29,prevRank:"1",isIncrease:true },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14,prevRank:"2",isIncrease:false }
 ]);
     private function setCustomLabel(element:ChartItem):String {                  
var data:BarSeriesItem = BarSeriesItem(element);      
 return (data.item.prevRank).toString();    
     }
 public function init(element:Object):String {
                    var data:PlotSeriesItem = PlotSeriesItem(element);                      
                    if(data.item.isIncrease){    
                            return "images/increase.png";
                    }
                    else{
                            return "images/decrease.png";         
                    }          
     }
]]></mx:Script>
 <mx:VBox>
<mx:BarChart id="bar" showDataTips="true"
            dataTipMode="multiple" >           
            <mx:verticalAxis>
                    <mx:CategoryAxis id="v1"  categoryField="Country"  dataProvider="{medalsAC}"/>
                </mx:verticalAxis>
                 <mx:verticalAxisRenderers>
                    <mx:AxisRenderer placement="left" axis="{v1}"
                        verticalAxisTitleAlignment="vertical">
                    </mx:AxisRenderer>  开发者_JAVA百科               
                </mx:verticalAxisRenderers>
            <mx:series>
                <mx:BarSeries id="bs2"
                    yField="Country" 
                    xField="Silver"                    
                   dataProvider="{medalsAC}" labelFunction="setCustomLabel"
                />
              <mx:PlotSeries id="plotSeries" yField="Country" xField="Silver"   dataProvider="{medalsAC}"                   
                    displayName="Current Trend">
                    <mx:itemRenderer>
                        <mx:Component>
            <mx:Image source="{outerDocument.init(data)}" horizontalAlign="center" height="16" width="16"/>
                        </mx:Component>
                    </mx:itemRenderer>
             </mx:PlotSeries>
            </mx:series>
        </mx:BarChart>

</mx:VBox>
</mx:Application>


Try something like this:

<mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml">          
    <mx:Script>
        <![CDATA[
            import mx.charts.ChartItem;
            import mx.charts.chartClasses.Series;
            import mx.charts.series.items.BarSeriesItem;
            import mx.charts.series.items.PlotSeriesItem;
            import mx.collections.ArrayCollection;
            import mx.controls.Label;  

        //Dataprovider for chart    
        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection([
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29,prevRank:"1",isIncrease:true },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14,prevRank:"2",isIncrease:false }
        ]);

        private function setCustomLabel(element:ChartItem, series:Series):String
        {                  
            var data:BarSeriesItem = BarSeriesItem(element);      
            return (data.item.prevRank).toString();    
        }
        public function init(element:Object):String 
        {
            var data:PlotSeriesItem = PlotSeriesItem(element);    
            if(data && data.item)
            {
                if(data.item.isIncrease){    
                    return "images/increase.png";
                }
                else{
                    return "images/decrease.png";         
                }     
            }
            return "";
        }
    ]]>
    </mx:Script>
    <mx:VBox>
        <mx:BarChart id="bar" showDataTips="true" dataProvider="{medalsAC}"
                     dataTipMode="multiple" >           
            <mx:verticalAxis>
                <mx:CategoryAxis id="v1"  categoryField="Country"  dataProvider="{medalsAC}"/>
            </mx:verticalAxis>
            <mx:verticalAxisRenderers>
                <mx:AxisRenderer placement="left" axis="{v1}"
                                 verticalAxisTitleAlignment="vertical">
                </mx:AxisRenderer>                 
            </mx:verticalAxisRenderers>
            <mx:series>
                <mx:BarSeries id="bs2"
                              yField="Country" 
                              xField="Silver"        
                              labelPosition="inside"
                              labelFunction="setCustomLabel"
                              />
                <mx:PlotSeries id="plotSeries" yField="Country" xField="Silver" dataProvider="{medalsAC}"                   
                               displayName="Current Trend">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:Image source="{outerDocument.init(data)}" horizontalAlign="center" height="16" width="16"/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:PlotSeries>
            </mx:series>
        </mx:BarChart>

    </mx:VBox>
</mx:Application>

However, it must be said that the code is messy and you're using Flex 3 while Flex 4 is already out. You should create the item renderer in a separate class and always check for null objects because they can (and will) create errors.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜