Barseries中的Labelfunction和plotseries

Question

我有一张弗莱克条形图。它有一个酒吧系列。我需要在条的顶端显示数据标签。为此，我使用labelFunction.This工作得很好。现在，我想在同一图表中添加一个绘图系列。一旦添加，bar系列中的labelfunction就不起作用了。标签不是visible.Any idea?谢谢

<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>                 
                </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>

Answer 1

尝试如下所示：

<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>

然而，必须指出的是，代码很混乱，当Flex4已经发布时，您正在使用Flex3。您应该在单独的类中创建项目渲染器，并始终检查null对象，因为它们可以(也将)创建错误。