Flex4 用LineChart实现实时曲线图，并在其中添加自定义的虚线水平线

博客分类：
• Flex示例
• Flex自定义控件

FlexLineChart虚线水平线 

本示例首先是为了显示实时曲线。然后呢，要显示个水平线，比如我要显示一个变量的变化过程，但它有一个标准值，就可以用该种方式。

示例：



然后是代码：
先看Application：

Java代码

 

1. <?xml version="1.0" encoding="utf-8"?>   
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
3.                xmlns:s="library://ns.adobe.com/flex/spark"  
4.                xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:chartClasses="lip.charts.chartClasses.*">   
5.        
6.     <fx:Script>   
7.         <![CDATA[   
8.             import lip.utils.DateFormatter;   
9.                
10.             import mx.collections.ArrayCollection;   
11.             import mx.utils.ObjectProxy;   
12.                
13.             private static const DELAY:int = 1000;   
14.                
15.             private static const MAX_COUNT:int = 10;   
16.                
17.             [Bindable]   
18.             private var ac:ArrayCollection;   
19.                
20.             private var timer:Timer;   
21.                
22.             protected function startCalc(event:MouseEvent):void  
23.             {   
24.                 if(!timer)   
25.                 {   
26.                     timer = new Timer(DELAY);   
27.                     timer.addEventListener(TimerEvent.TIMER, timer_timerHandler);   
28.                 }   
29.                 timer.start();   
30.             }   
31.                
32.             protected function stopCalc(event:MouseEvent):void  
33.             {   
34.                 if(timer)   
35.                     timer.stop();   
36.                    
37.                 ac = null;   
38.             }   
39.                
40.             protected function timer_timerHandler(event:TimerEvent):void  
41.             {   
42.                 var now:Date = new Date();   
43.                 var nowTime:String;   
44.                    
45.                 if(!ac)   
46.                 {   
47.                     ac = new ArrayCollection();   
48.                     now.setTime(now.time - 1000 * MAX_COUNT);   
49.                     for (var i:int = 0; i < MAX_COUNT; i++)    
50.                     {   
51.                         nowTime = DateFormatter.getInstance().formatTime(now);   
52.                         ac.addItem(new ObjectProxy({time:nowTime, gas:0}));   
53.                         now.setTime(now.time + 1000);   
54.                     }   
55.                        
56.                 }   
57.                    
58.                 nowTime = DateFormatter.getInstance().formatTime(now);   
59.                 var item:ObjectProxy = new ObjectProxy({time:nowTime, gas:Math.round(Math.random() * 100) * .01});   
60.                    
61.                 if(ac.length < 10)   
62.                 {   
63.                     ac.addItem(item);   
64.                 }   
65.                 else  
66.                 {   
67.                     ac.removeItemAt(0);   
68.                     ac.addItem(item);   
69.                 }   
70.                    
71.                 trace(item.time, ":", item.gas);   
72.             }   
73.                
74.             protected function changeDashedLine(event:MouseEvent):void  
75.             {   
76.                 nn = Math.round((Math.random() / 5 + 0.8) * 100) * .01;   
77.             }   
78.                
79.         ]]>   
80.     </fx:Script>   
81.        
82.     <fx:Declarations>   
83.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->   
84.         <mx:SeriesInterpolate id="effect" duration="1000" />   
85.         <fx:Number id="nn">0.3</fx:Number>   
86.     </fx:Declarations>   
87.        
88.     <s:Panel width="600" height="500" title="测试实时曲线">   
89.         <s:controlBarContent>   
90.             <s:HGroup width="100%" height="20" horizontalAlign="center" verticalAlign="middle">   
91.                 <s:Button label="start" click="startCalc(event)"/>   
92.                 <s:Button label="stop" click="stopCalc(event)"/>   
93.                 <s:Button label="change dashed line" click="changeDashedLine(event)"/>   
94.             </s:HGroup>   
95.         </s:controlBarContent>   
96.         <mx:LineChart id="chart" width="500" height="400" horizontalCenter="0" showDataTips="true"  
97.                       verticalCenter="0" dataProvider="{ac}" >   
98.             <mx:backgroundElements>   
99.                 <mx:GridLines gridDirection="both"/>   
100.                 <chartClasses:DashedLines lineColor="0xFF0000" yValue="{nn}"/>   
101.             </mx:backgroundElements>   
102.                
103.             <mx:horizontalAxis>   
104.                 <mx:CategoryAxis categoryField="time" displayName="Time" title="时间" />   
105.             </mx:horizontalAxis>   
106.                
107.             <mx:verticalAxis>   
108.                 <mx:LinearAxis minimum="0" maximum="1"/>   
109.             </mx:verticalAxis>   
110.                
111.             <mx:series>   
112.                 <mx:LineSeries displayName="瓦斯" xField="time" yField="gas" form="curve"/>   
113.             </mx:series>   
114.         </mx:LineChart>   
115.            
116.     </s:Panel>   
117. </s:Application>  

接下来是里面的DashedLines：

Java代码

 

1. package lip.charts.chartClasses   
2. {   
3.     import flash.display.Graphics;   
4.     import flash.geom.Point;   
5.        
6.     import lip.utils.GraphicUtils;   
7.        
8.     import mx.charts.chartClasses.CartesianChart;   
9.     import mx.charts.chartClasses.CartesianTransform;   
10.     import mx.charts.chartClasses.ChartElement;   
11.     import mx.charts.chartClasses.ChartState;   
12.     import mx.charts.chartClasses.IAxis;   
13.        
14.     public class DashedLines extends ChartElement   
15.     {   
16.         public function DashedLines()   
17.         {   
18.             super();   
19.         }   
20.   
21.         private var _yValue:Number = NaN;   
22.   
23.         /**  
24.          * 该线对应的y值  
25.          */  
26.         public function get yValue():Number   
27.         {   
28.             return _yValue;   
29.         }   
30.   
31.         /**  
32.          * @private  
33.          */  
34.         public function set yValue(value:Number):void  
35.         {   
36.             _yValue = value;   
37.             invalidateDisplayList();   
38.         }   
39.   
40.   
41.         /**  
42.          * 实线部分的长度  
43.          * @default 10  
44.          */  
45.         public var length:Number = 10;   
46.   
47.         /**  
48.          * 空白部分的长度  
49.          * @default 5  
50.          */  
51.         public var gap:Number = 5;   
52.   
53.         /**  
54.          * 线条的宽度  
55.          * @default 1  
56.          */  
57.         public var lineThickness:Number = 1;   
58.   
59.         /**  
60.          * 线条的颜色  
61.          * @default 黑色  
62.          */  
63.         public var lineColor:uint = 0;   
64.            
65.         private var _displayName:String;   
66.   
67.         /**  
68.          * 该线所对应的数值名称(平均值，最大值等等)  
69.          * @default   
70.          */  
71.         public function get displayName():String   
72.         {   
73.             return _displayName;   
74.         }   
75.   
76.         /**  
77.          * @private  
78.          */  
79.         public function set displayName(value:String):void  
80.         {   
81.             _displayName = value;   
82.             invalidateDisplayList();   
83.         }   
84.   
85.            
86.         protected var label:TextField;   
87.            
88.         override protected function createChildren():void  
89.         {   
90.             // TODO Auto Generated method stub   
91.             super.createChildren();   
92.                
93.             if(!label)   
94.             {   
95.                 label = new TextField();   
96.                 label.mouseEnabled = false;   
97.                 addChild(label);   
98.             }   
99.         }   
100.   
101.   
102.         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void  
103.         {   
104.             super.updateDisplayList(unscaledWidth, unscaledHeight);   
105.   
106.             if (!chart||   
107.                 chart.chartState == ChartState.PREPARING_TO_HIDE_DATA ||   
108.                 chart.chartState == ChartState.HIDING_DATA)   
109.             {   
110.                 return;   
111.             }   
112.                
113.             var g:Graphics = this.graphics;   
114.             g.clear();   
115.                
116.             // 如果没有设置数据，不显示   
117.             if(isNaN(yValue))   
118.             {   
119.                 return;   
120.             }   
121.                
122.             var w:Number = unscaledWidth;   
123.             var h:Number = unscaledHeight;   
124.             var vAxis:IAxis = CartesianChart(this.chart).verticalAxis;   
125.                
126.             var y:Number = dataToLocal(0, yValue).y;   
127.                
128.             var pFrom:Point = new Point(0, y);   
129.             var pTo:Point = new Point(w, y);   
130.                
131.             GraphicUtils.drawDashed(g, pFrom, pTo, this.length, this.gap, this.lineThickness, this.lineColor);   
132.                
133.             label.text = (displayName ? (displayName + " : ") : "") + yValue;   
134.             label.x = 1;   
135.             label.y = y > 21 ? y - 21 : y + 1;   
136.         }   
137.   
138.   
139.         // 这个方法复制自LineSeries   
140.         override public function dataToLocal(... dataValues):Point   
141.         {   
142.             var data:Object = {};   
143.             var da:Array /* of Object */ = [ data ];   
144.             var n:int = dataValues.length;   
145.                
146.             if (n > 0)   
147.             {   
148.                 data["d0"] = dataValues[0];   
149.                 dataTransform.getAxis(CartesianTransform.HORIZONTAL_AXIS).   
150.                     mapCache(da, "d0", "v0");   
151.             }   
152.                
153.             if (n > 1)   
154.             {   
155.                 data["d1"] = dataValues[1];   
156.                 dataTransform.getAxis(CartesianTransform.VERTICAL_AXIS).   
157.                     mapCache(da, "d1", "v1");              
158.             }   
159.                
160.             dataTransform.transformCache(da,"v0","s0","v1","s1");   
161.                
162.             return new Point(data.s0 + this.x,   
163.                 data.s1 + this.y);   
164.         }   
165.     }   
166. }  

还有其中用到的GraphicUtils.drawDashed()方法：

Java代码

 

1. package lip.utils   
2. {   
3.     import flash.display.Graphics;   
4.     import flash.geom.Point;   
5.   
6.     /**  
7.      * 一些绘图相关的方法  
8.      * @author lip  
9.      */  
10.     public class GraphicUtils   
11.     {   
12.         public function GraphicUtils()   
13.         {   
14.         }   
15.            
16.            
17.         /**  
18.          * 画虚线  
19.          * @param graphics 你懂的  
20.          * @param pFrom 起点  
21.          * @param pTo 终点  
22.          * @param length 实线段的长度  
23.          * @param gap 实线段的间距  
24.          * @param thickness 线的宽度  
25.          * @param color 线的颜色  
26.          */  
27.         public static function drawDashed(graphics:Graphics, pFrom:Point, pTo:Point, length:Number = 5, gap:Number = 5, thickness:Number = 1, color:uint = 0):void  
28.         {   
29.             var max:Number = Point.distance(pFrom, pTo);   
30.             var l:Number = 0;   
31.             var p3:Point;   
32.             var p4:Point;   
33.             graphics.lineStyle(thickness, color);   
34.             while (l < max)   
35.             {   
36.                 p3 = Point.interpolate(pTo, pFrom, l / max);   
37.                 l += length;   
38.                 if (l > max)   
39.                     l = max;   
40.                 p4 = Point.interpolate(pTo, pFrom, l / max);   
41.                 graphics.moveTo(p3.x, p3.y)   
42.                 graphics.lineTo(p4.x, p4.y)   
43.                 l += gap;   
44.             }   
45.         }   
46.     }   
47. }