Flex 中图表样式

caiyizhen808 2010-10-10 05:03:03
怎么设置图表中鼠标移到某个图表上的一个点时弹出框显示的样式。
...全文
120 点赞 收藏 6
写回复
6 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
caiyizhen808 2010-10-20
谢谢,效果还不错!
回复
水中影子 2010-10-20
使用dataTipFunction

在dataTipFunction里使用标签 <font/> <b/> <i/>等标签
回复
ntntime 2010-10-20
[Quote=引用 4 楼 caiyizhen808 的回复:]
谢谢,效果还不错!
[/Quote]:)
那麻烦您结下帖给点分吧,谢谢
回复
ntntime 2010-10-16
CHART:

ChartDatatipSkinExample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
<mx:LineChart
id="myLC"
dataProvider="{_dp}"
showDataTips="true"
dataTipRenderer="com.johnnynesbitt.DatatipSkin"
>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="day" />
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries xField="day" yField="dailyTill">
</mx:LineSeries>
</mx:series>
</mx:LineChart>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var _dp:ArrayCollection = new ArrayCollection([
{day:"Monday", dailyTill:7792.43}, a
{day:"Tuesday", dailyTill:8544.875},
{day:"Wednesday", dailyTill:6891.432},
{day:"Thursday", dailyTill:10438.1},
{day:"Friday", dailyTill:8395.222},
{day:"Saturday", dailyTill:5467.00},
{day:"Sunday", dailyTill:10001.5}
]);
]]>
</mx:Script>
</mx:Application>

DataTipRenderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="0xFFDDDD"
borderColor="0xFF0000"
borderStyle="solid"
paddingTop="5"
paddingBottom="5"
paddingRight="10"
paddingLeft="10"
verticalGap="-2"
color="0xFF0000"
>
<mx:Label text="{_dayText}" width="100%" textAlign="center" fontWeight="bold" fontSize="13" />
<mx:Label text="{_dollarText}" width="100%" textAlign="center" fontSize="11" />
<mx:Script>
<![CDATA[
import mx.charts.series.items.LineSeriesItem;
import mx.charts.HitData;

[Bindable]
private var _dayText:String;

[Bindable]
private var _dollarText:String;

override public function set data(value:Object):void{
//we know to expect a HitData object from a chart, so let's cast it as such
//so that there aren't any nasty runtime surprises
var hd:HitData = value as HitData;

//Any HitData object carries a reference to the ChartItem that created it.
//This is where we need to know exactly what kind of Chartitem we're dealing with.
//Why? Because a pie chart isn't going to have an xValue and a yValue, but things
//like bar charts, column charts and, in our case, line charts will.
var item:LineSeriesItem = hd.chartItem as LineSeriesItem;

//the xValue and yValue are returned as Objects. Let's cast them as strings, so
//that we can display them in the Label fields.
_dayText = String(item.xValue);
_dollarText = String(item.yValue);
}//end set data
]]>
</mx:Script>
</mx:VBox>

数据格式化:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="0xFFDDDD"
borderColor="0xFF0000"
borderStyle="solid"
paddingTop="5"
paddingBottom="5"
paddingRight="10"
paddingLeft="10"
verticalGap="-2"
color="0xFF0000"
>
<mx:Label text="{_dayText}" width="100%" textAlign="center" fontWeight="bold" fontSize="13" />
<mx:Label text="{_dollarText}" width="100%" textAlign="center" fontSize="11" />
<mx:NumberFormatter
id="dollarFormatter"
precision="2"
thousandsSeparatorTo=","
decimalSeparatorTo="."
rounding="nearest"
/>
<mx:Script>
<![CDATA[
import mx.charts.series.items.LineSeriesItem;
import mx.charts.HitData;
import mx.formatters.NumberFormatter;

[Bindable]
private var _dayText:String;

[Bindable]
private var _dollarText:String;

override public function set data(value:Object):void{
//we know to expect a HitData object from a chart, so let's cast it as such
//so that there aren't any nasty runtime surprises
var hd:HitData = value as HitData;

//Any HitData object carries a reference to the ChartItem that created it.
//This is where we need to know exactly what kind of Chartitem we're dealing with.
//Why? Becaause a pie chart isn't going to have an xValue and a yValue, but things
//like bar charts, column charts and, in our case, line charts will.
var item:LineSeriesItem = hd.chartItem as LineSeriesItem;

//the xValue and yValue are returned as Objects. Let's cast them as strings, so
//that we can display them in the Label fields.
_dayText = String(item.xValue);
_dollarText = "$" + dollarFormatter.format(String(item.yValue));
}//end set data
]]>
</mx:Script>
</mx:VBox>
默认效果:

设定样式后的效果:

回复
ntntime 2010-10-16
CHART:

ChartDatatipSkinExample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
<mx:LineChart
id="myLC"
dataProvider="{_dp}"
showDataTips="true"
dataTipRenderer="com.johnnynesbitt.DatatipSkin"
>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="day" />
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries xField="day" yField="dailyTill">
</mx:LineSeries>
</mx:series>
</mx:LineChart>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var _dp:ArrayCollection = new ArrayCollection([
{day:"Monday", dailyTill:7792.43}, a
{day:"Tuesday", dailyTill:8544.875},
{day:"Wednesday", dailyTill:6891.432},
{day:"Thursday", dailyTill:10438.1},
{day:"Friday", dailyTill:8395.222},
{day:"Saturday", dailyTill:5467.00},
{day:"Sunday", dailyTill:10001.5}
]);
]]>
</mx:Script>
</mx:Application>

DataTipRenderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="0xFFDDDD"
borderColor="0xFF0000"
borderStyle="solid"
paddingTop="5"
paddingBottom="5"
paddingRight="10"
paddingLeft="10"
verticalGap="-2"
color="0xFF0000"
>
<mx:Label text="{_dayText}" width="100%" textAlign="center" fontWeight="bold" fontSize="13" />
<mx:Label text="{_dollarText}" width="100%" textAlign="center" fontSize="11" />
<mx:Script>
<![CDATA[
import mx.charts.series.items.LineSeriesItem;
import mx.charts.HitData;

[Bindable]
private var _dayText:String;

[Bindable]
private var _dollarText:String;

override public function set data(value:Object):void{
//we know to expect a HitData object from a chart, so let's cast it as such
//so that there aren't any nasty runtime surprises
var hd:HitData = value as HitData;

//Any HitData object carries a reference to the ChartItem that created it.
//This is where we need to know exactly what kind of Chartitem we're dealing with.
//Why? Because a pie chart isn't going to have an xValue and a yValue, but things
//like bar charts, column charts and, in our case, line charts will.
var item:LineSeriesItem = hd.chartItem as LineSeriesItem;

//the xValue and yValue are returned as Objects. Let's cast them as strings, so
//that we can display them in the Label fields.
_dayText = String(item.xValue);
_dollarText = String(item.yValue);
}//end set data
]]>
</mx:Script>
</mx:VBox>

数据格式化:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="0xFFDDDD"
borderColor="0xFF0000"
borderStyle="solid"
paddingTop="5"
paddingBottom="5"
paddingRight="10"
paddingLeft="10"
verticalGap="-2"
color="0xFF0000"
>
<mx:Label text="{_dayText}" width="100%" textAlign="center" fontWeight="bold" fontSize="13" />
<mx:Label text="{_dollarText}" width="100%" textAlign="center" fontSize="11" />
<mx:NumberFormatter
id="dollarFormatter"
precision="2"
thousandsSeparatorTo=","
decimalSeparatorTo="."
rounding="nearest"
/>
<mx:Script>
<![CDATA[
import mx.charts.series.items.LineSeriesItem;
import mx.charts.HitData;
import mx.formatters.NumberFormatter;

[Bindable]
private var _dayText:String;

[Bindable]
private var _dollarText:String;

override public function set data(value:Object):void{
//we know to expect a HitData object from a chart, so let's cast it as such
//so that there aren't any nasty runtime surprises
var hd:HitData = value as HitData;

//Any HitData object carries a reference to the ChartItem that created it.
//This is where we need to know exactly what kind of Chartitem we're dealing with.
//Why? Becaause a pie chart isn't going to have an xValue and a yValue, but things
//like bar charts, column charts and, in our case, line charts will.
var item:LineSeriesItem = hd.chartItem as LineSeriesItem;

//the xValue and yValue are returned as Objects. Let's cast them as strings, so
//that we can display them in the Label fields.
_dayText = String(item.xValue);
_dollarText = "$" + dollarFormatter.format(String(item.yValue));
}//end set data
]]>
</mx:Script>
</mx:VBox>
默认效果:

设定样式后的效果:

回复
相关推荐
发帖
Flex
创建于2007-12-13

4328

社区成员

多媒体/设计 Flex
申请成为版主
帖子事件
创建了帖子
2010-10-10 05:03
社区公告
暂无公告