Labelfunction в Barseries вместе с плотсерией - PullRequest
0 голосов
/ 29 июля 2011

У меня есть гистограмма Flec.У него есть серия Бар.Мне нужно показать метку на конце бара.Для этого я использую labelFunction. Это прекрасно работает.Теперь я хочу добавить сюжетную серию в тот же график.После того, как он добавлен, функция метки в серии баров не работает.Ярлыки не видны. Есть идеи? Спасибо

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

1 Ответ

1 голос
/ 01 августа 2011

Попробуйте что-то вроде этого:

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

Однако нужно сказать, что код неопрятен, и вы используете Flex 3, а Flex 4 уже вышел. Вам следует создать средство визуализации элементов в отдельном классе и всегда проверять наличие нулевых объектов, поскольку они могут (и будут) создавать ошибки.

...