Flex 中图表样式

caiyizhen808 2010-10-10 05:03:03

怎么设置图表中鼠标移到某个图表上的一个点时弹出框显示的样式。

...全文

148 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

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>

默认效果：



设定样式后的效果：