Flex AIR：Line Chart 示例－从 XML 原始数据运算得出增长率图表

从 XML 原始数据运算得出增长率图表，主要方法是遍历 XML 子节点。通过 reverse() 函数还可以先把 XML 倒序排列，便于以不同角度观察数据。

 

效果如下图：

 

 

ChartTest.mxml 内容如下：

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       xmlns:flexlib="http://code.google.com/p/flexlib/"
                       creationComplete="init()"
                       width="800" height="450" >
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.charts.HitData;
            import mx.charts.series.items.LineSeriesItem;
            
            /**
             * XML 数据源。
             */
            private var xml:XML = 
                <data>
                    <stock>
                        <term>Season 1</term>
                        <value1>10</value1>
                        <value2>40</value2>
                    </stock>
                    <stock>
                        <term>Season 2</term>
                        <value1>20</value1>
                        <value2>30</value2>
                    </stock>
                    <stock>
                        <term>Season 3</term>                
                        <value1>25</value1>
                        <value2>35</value2>
                    </stock>
                    <stock>
                        <term>Season 4</term>                
                        <value1>50</value1>
                        <value2>25</value2>
                    </stock>
                </data>;
            
            /**
             *  AIR 主窗口初始化，为 Line Chart 绑定数据源。
             */
            protected function init():void
            {                
                this.ctLine.dataProvider = this.xml.children();
                this.calcIncrement(this.xml);
                this.ctLineIncrease.dataProvider = this.xml.children();
            }

            /**
             * 令 XML 数据源倒序排列。
             * 
             * 用法：
             * var result:XML = &lt;data&gt;&lt;/data&gt;;
             * result = this.reverse(this.xml, result);
             * 
             * @param source XML 数据源。
             * @param root 倒序排列后的 XML 结果，须传入一个顶层节点，以便遍历数据源子节点后依次添加到此顶层节点。
             * 
             * 
             * 
             */
            private function reverse(source:XML, root:XML):XML
            {
                var list:XMLList = source.children();
                for(var i:int=list.length()-1;i>-1;i--)
                {
                    root.appendChild(list[i]);
                }
                return root;
            }
            
            /**
             * 计算 XML 数据源中前后两个 value 节点的值的增长率，储存到 increase 节点。
             * @ram source XML 数据源
             */
            private function calcIncrement(source:XML):void
            {
                var list:XMLList = source.children();
                for(var i:int=list.length()-1;i>-1;i--)
                {
                    if(i>0)
                    {
                        var next:XML = list[i];
                        var prior:XML = list[i-1];
                        var increase1:Number = Number((next.value1 - prior.value1))/Number(prior.value1);
                        next.increase1 = increase1;
                        
                        
                        var increase2:Number = Number((next.value2 - prior.value2))/Number(prior.value2);
                        next.increase2 = increase2;
                    }
                    else
                    {
                        list[i].increase1 = 0;
                        list[i].increase2 = 0;
                    }
                    trace(list[i].value1 + " " + list[i].increase1 + "\t" + list[i].value2 + " " + list[i].increase2);
                }
            }
            
            /**
             * 原始数据 Line Chart 的数值提示
             */
            protected  function ctLine_dataTips(hd:HitData):String {   
                var curObj:Object = hd.item;   
                var curSeries:LineSeries = LineSeries(hd.chartItem.element); // 获得当前的Series 
                var value:Number = Number((hd.chartItem as LineSeriesItem).yValue); // 获得当前指向的值
                return curObj.term + "\n" + curSeries.displayName + "\n = " + value;
            }  
            
            /**
             * 增长率 Line Chart 的数值提示
             */
            protected  function ctLineIncrease_dataTips(hd:HitData):String {   
                var curObj:Object = hd.item;   
                var curSeries:LineSeries = LineSeries(hd.chartItem.element); // 获得当前的Series
                var increase:Number = Number((hd.chartItem as LineSeriesItem).yValue); // 获得当前指向的值
                return curObj.term + "\n" + curSeries.displayName + "\n = " + Number(increase*100).toFixed(2) + "%";   
            }  

        ]]>
    </fx:Script>
    <!---
        呈现原始数据的 Line Chart
    -->
    <mx:LineChart x="80" y="60" width="300" height="300" id="ctLine" showDataTips="true" dataTipFunction="ctLine_dataTips">
        <mx:series>
            <mx:LineSeries displayName="Value 1" yField="value1"/>
            <mx:LineSeries displayName="Value 2" yField="value2"/>
        </mx:series>
        <!---
            定义橫坐标的标题
        -->
        <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="term" title="Season"/>
        </mx:horizontalAxis>
    </mx:LineChart>
    <!---
    呈现原始数据的 Line Chart 的图例
    -->
    <mx:Legend x="5" y="5" dataProvider="{ctLine}" id="ctLegendValue"/>
    
    <!---
    呈现增长率的 Line Chart
    -->
    <mx:LineChart x="400" y="60" width="300" height="300" id="ctLineIncrease" showDataTips="true" dataTipFunction="ctLineIncrease_dataTips">
        <mx:series>
            <mx:LineSeries displayName="Increase Rate 1" yField="increase1"/>
            <mx:LineSeries displayName="Increase Rate 2" yField="increase2"/>
        </mx:series>
        <!---
        定义橫坐标的标题
        -->
        <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="term" title="Season"/>
        </mx:horizontalAxis>
    </mx:LineChart>
    <!---
    呈现增长率的 Line Chart 的图例
    -->
    <mx:Legend x="385" y="5" dataProvider="{ctLineIncrease}" id="ctLegendIncrease"/>
</s:WindowedApplication>