Flex之图表篇

最新推荐文章于 2024-01-08 17:35:14 发布

weixin_33690963

最新推荐文章于 2024-01-08 17:35:14 发布

阅读量53

点赞数

原文链接：http://blog.51cto.com/jawsy/394147

版权

饼图实例：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var bookSales:ArrayCollection = new ArrayCollection(
                [
                    {bookType:"文学",Sales:143},
                    {bookType:"历史",Sales:189},
                    {bookType:"技术",Sales:178},
                    {bookType:"经济",Sales:224}
                ]
            );

            //自定义饼图显示标签
            private function
chartLabel(dataItem:Object,fleid:String,index:int,dataPerc
ent:Number):String{
                var rounded:Number = Math.round(dataPercent);
                return dataItem.bookType + "销售额占比:" + rounded + "%";
            }
        ]]>
    </mx:Script>

    <mx:PieChart width="50%" height="50%" dataProvider="{bookSales}">
        <mx:series>
            <mx:PieSeries field="Sales" labelPosition="callout"
labelFunction="chartLabel" />
        </mx:series>
    </mx:PieChart>
</mx:Application>

见源代码：pieDemo.mxml。

增加渐变效果：
可以在pieSeries容器内使用<mx:fills>容器实现渐变效果。在该容器内，再为饼图放入一个<mx:RadialGradient>容器(也可以是LinearGradient)。每个RadialGradient 容器内需要有一个<mx:entries>容器。最后，在entries容器内放2个<mx:GradientEntry>标签：一个用于起始颜色，一个用于结束颜色。

见源代码：pieDemo1.mxml。
柱状图示例：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var bookSales:ArrayCollection = new ArrayCollection(
                [
                    {bookType:"文学",Sales:143,returns:13},
                    {bookType:"历史",Sales:189,returns:9},
                    {bookType:"技术",Sales:178,returns:11},
                    {bookType:"经济",Sales:224,returns:7}
                ]
            );

            //自定义饼图显示标签
            private function chartLabel(dataItem:Object,fleid:String,index:int,
                                                        dataPercent:Number):String{
                var rounded:Number = Math.round(dataPercent);
                return dataItem.bookType + "销售额占比:" + rounded + "%";
            }
        ]]>
    </mx:Script>

    <mx:ColumnChart id="myChart" dataProvider="{bookSales}" width="50%"
                  height="50%" showDataTips="true">
        
        <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="bookType" />
        </mx:horizontalAxis>
        <mx:series>
            <mx:ColumnSeries xField="bookType" yField="Sales"
                           displayName="销售额" />
            <mx:ColumnSeries xField="bookType" yField="returns"
                          displayName="退回数" />
        </mx:series>
    </mx:ColumnChart>

    <mx:Legend dataProvider="{myChart}" x="630" y="10" />
</mx:Application>

见源码：columnDemo.mxml。

增加动画效果：
可以使用三种过渡效果：
?    SeriesInterpolate：可以在新旧数据变换时使数据点移动。
?    SeriesSlide：滑入或滑出。
?    SeriesZoom：放大或缩小。

动画效果示例：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var bookSalesA:ArrayCollection = new ArrayCollection(
                [
                    {bookType:"文学",Sales:143,returns:13},
                    {bookType:"历史",Sales:189,returns:9},
                    {bookType:"技术",Sales:178,returns:11},
                    {bookType:"经济",Sales:224,returns:7}
                ]
            );

            [Bindable]
            private var bookSalesB:ArrayCollection = new ArrayCollection(
                [
                    {bookType:"文学",Sales:91,returns:20},
                    {bookType:"历史",Sales:142,returns:28},
                    {bookType:"技术",Sales:182,returns:30},
                    {bookType:"经济",Sales:120,returns:10}
                ]
            );

            //自定义饼图显示标签
            private function chartLabel(dataItem:Object,fleid:String,index:int,
                                       dataPercent:Number):String{
                var rounded:Number = Math.round(dataPercent);
                return dataItem.bookType + "销售额占比:" + rounded + "%";
            }
        ]]>
    </mx:Script>

    
    <mx:SeriesInterpolate id="chartChange" duration="2000" />
    <mx:SeriesSlide id="chartSlideIn" duration="2000" direction="up" />
    <mx:SeriesSlide id="chartSlideOut" duration="2000" direction="down" />
    <mx:SeriesZoom id="chartSlideIn2" duration="2000" />
    <mx:SeriesZoom id="chartSlideOut2" duration="2000" />

    <mx:ColumnChart id="myChart" dataProvider="{bookSalesA}" width="50%" height="50%"

showDataTips="true">
        
        <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="bookType" />
        </mx:horizontalAxis>
        <mx:series>
            <mx:ColumnSeries xField="bookType" yField="Sales"
displayName="销售额" showDataEffect="{chartSlideIn}"
hideDataEffect="{chartSlideOut}" />
            <mx:ColumnSeries xField="bookType" yField="returns"
displayName="退回数" showDataEffect="{chartSlideIn}"
hideDataEffect="{chartSlideOut}" />
        </mx:series>
    </mx:ColumnChart>

    <mx:Legend dataProvider="{myChart}" x="630" y="10" />

    <mx:HBox x="20" y="400">
        <mx:RadioButton groupName="books" label="数据A" selected="true"
click="myChart.dataProvider=bookSalesA" />
        <mx:RadioButton groupName="books" label="数据B"
click="myChart.dataProvider=bookSalesB" />
    </mx:HBox>
</mx:Application>

见源码：effectChartDemo.mxml