在弹性条形图轴中显示带有图像的文本

时间:2011-08-29 14:24:27

标签: flex charts flex3

我正在创建柱形图以显示Facebook应用程序中的朋友得分统计数据。我的问题是如何在y轴上显示图像的朋友名称,在x轴上显示他们的得分。我无法在标签的方法'setSource'中传递任何参数。请在此处查看示例代码。如果有人知道,请给我一些想法或样品。提前谢谢。

 <mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical" width="100%" height="100%">  
      <mx:Script><![CDATA[
    import mx.controls.TextArea;
    import mx.controls.Text;`enter code here`
    import mx.utils.ObjectUtil;
    import mx.controls.Alert;
         import mx.collections.ArrayCollection;
         import mx.charts.series.items.PlotSeriesItem;
         import mx.controls.Label;
         import mx.controls.Image;
         import mx.containers.HBox;
         import mx.charts.series.items.BarSeriesItem;
         import mx.charts.chartClasses.Series;
         import mx.charts.ChartItem;

         [Bindable]
         public var frienddetails:ArrayCollection = new ArrayCollection([                                                 
       {score:"5",Name:"charles",imgSource:"http://graph.facebook.com/10058050960/picture"},
       {score:"9",Name:"Martin",imgSource:"http://graph.facebook.com/100231645808/picture"},
       {score:"7",Name:"stewart",imgSource:"http://graph.facebook.com/10058050960/picture"}]);

    ]]>
    </mx:Script>    


    <mx:BarChart id="bar" height="100%"  
            paddingLeft="15" paddingRight="5" 
            showDataTips="true"  width="847" 
            dataTipMode="multiple"  >
            <mx:verticalAxis>
                <mx:CategoryAxis id="vAxis" categoryField="Name"  dataProvider="{frienddetails}" />
            </mx:verticalAxis>  
            <mx:verticalAxisRenderers>
                <mx:AxisRenderer placement="left" axis="{vAxis}"  >
                    <mx:labelRenderer>
                        <mx:Component>
                            <mx:HBox width="100%" height="100%" minWidth="120" minHeight="20">
                                <mx:Image id="axisImage" height="100%" width="25" source="{setSource()}">
                                    <mx:Script><![CDATA[
                                        import mx.collections.ArrayCollection;
                                        import mx.utils.ObjectUtil;
                                        import mx.controls.Alert;
                                        import mx.charts.chartClasses.Series;
                                        import mx.charts.ChartItem;
                                        import mx.charts.series.items.BarSeriesItem;                                        
                               public function setSource(element : ChartItem, series : Series) : String
                                       {
                                            var data : BarSeriesItem = BarSeriesItem(element);
                                            var imgSrc : String = "";

                                            Alert.show("Check : "+data.item.imgSource);
                                            imgSrc = data.item.imgSource;

                                            return imgSrc;
                                        }  
                                    ]]></mx:Script>
                                </mx:Image>
                                <mx:Label id="axisLabel" fontSize="12" width="100%" height="100%">
                                    <mx:Script><![CDATA[
                                        [Bindable]
                                        override public function set data(value : Object) : void
                                        {
                                            if (value == null)
                                            {
                                                return;
                                            }

                                                axisLabel.text = value.text;

                                        }
                                    ]]>
                                    </mx:Script>
                                </mx:Label>
                            </mx:HBox>
                        </mx:Component>
                    </mx:labelRenderer>
                </mx:AxisRenderer>
            </mx:verticalAxisRenderers>
            <mx:series>
                <mx:BarSeries id="bs2" dataProvider="{frienddetails}" 
                        yField="Name" xField="score" displayName="Score" />          
        </mx:series>
    </mx:BarChart>
</mx:Application>

1 个答案:

答案 0 :(得分:0)

setSource(element:ChartItem,series:Series)

在我们查看其他任何内容之前,您的函数需要2个参数:[element]和[series]。呼叫中既未指定。函数中仅引用[element]。