在弹性条形图轴上显示带有图像的文本
我正在创建柱形图来显示 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>
I am creating column chart to show friends score statistics in facebook application. My problem is how to display friend names with images in y-axis and their score in x-axis.I cant able to pass any arguments in the method 'setSource' of tag. please see the sample code here. If anybody came to know please give me some idea or samples. Thanks in advance.
<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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
setSource(element : ChartItem, series : Series)
在我们看其他内容之前,您的函数需要 2 个参数:[element] 和 [series]。通话中均未指定。函数中仅引用了 [element]。
setSource(element : ChartItem, series : Series)
Before we look at anything else, your function expects 2 arguments: [element] and [series]. Neither are specified in the call. Only [element] is referenced in the function.