Flex4 用LineChart實現(xiàn)實時曲線圖，并在其中添加自定義的虛線水平線

Sky-Cool 2012-07-24

展開全文

Flex4 用LineChart實現(xiàn)實時曲線圖，并在其中添加自定義的虛線水平線

博客分類：

Flex示例
Flex自定義控件

Flex LineChart 虛線水平線

本示例首先是為了顯示實時曲線。然后呢，要顯示個水平線，比如我要顯示一個變量的變化過程，但它有一個標準值，就可以用該種方式。

示例：

然后是代碼：
先看Application：

Java代碼

<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:chartClasses="lip.charts.chartClasses.*">
<fx:Script>
<![CDATA[
import lip.utils.DateFormatter;
import mx.collections.ArrayCollection;
import mx.utils.ObjectProxy;
private static const DELAY:int = 1000;
private static const MAX_COUNT:int = 10;
[Bindable]
private var ac:ArrayCollection;
private var timer:Timer;
protected function startCalc(event:MouseEvent):void
{
if(!timer)
{
timer = new Timer(DELAY);
timer.addEventListener(TimerEvent.TIMER, timer_timerHandler);
}
timer.start();
}
protected function stopCalc(event:MouseEvent):void
{
if(timer)
timer.stop();
ac = null;
}
protected function timer_timerHandler(event:TimerEvent):void
{
var now:Date = new Date();
var nowTime:String;
if(!ac)
{
ac = new ArrayCollection();
now.setTime(now.time - 1000 * MAX_COUNT);
for (var i:int = 0; i < MAX_COUNT; i++)
{
nowTime = DateFormatter.getInstance().formatTime(now);
ac.addItem(new ObjectProxy({time:nowTime, gas:0}));
now.setTime(now.time + 1000);
}
}
nowTime = DateFormatter.getInstance().formatTime(now);
var item:ObjectProxy = new ObjectProxy({time:nowTime, gas:Math.round(Math.random() * 100) * .01});
if(ac.length < 10)
{
ac.addItem(item);
}
else
{
ac.removeItemAt(0);
ac.addItem(item);
}
trace(item.time, ":", item.gas);
}
protected function changeDashedLine(event:MouseEvent):void
{
nn = Math.round((Math.random() / 5 + 0.8) * 100) * .01;
}
]]>
</fx:Script>
<fx:Declarations>
<mx:SeriesInterpolate id="effect" duration="1000" />
<fx:Number id="nn">0.3</fx:Number>
</fx:Declarations>
<s:Panel width="600" height="500" title="測試實時曲線">
<s:controlBarContent>
<s:HGroup width="100%" height="20" horizontalAlign="center" verticalAlign="middle">
<s:Button label="start" click="startCalc(event)"/>
<s:Button label="stop" click="stopCalc(event)"/>
<s:Button label="change dashed line" click="changeDashedLine(event)"/>
</s:HGroup>
</s:controlBarContent>
<mx:LineChart id="chart" width="500" height="400" horizontalCenter="0" showDataTips="true"
verticalCenter="0" dataProvider="{ac}" >
<mx:backgroundElements>
<mx:GridLines gridDirection="both"/>
<chartClasses:DashedLines lineColor="0xFF0000" yValue="{nn}"/>
</mx:backgroundElements>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="time" displayName="Time" title="時間" />
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis minimum="0" maximum="1"/>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries displayName="瓦斯" xField="time" yField="gas" form="curve"/>
</mx:series>
</mx:LineChart>
</s:Panel>
</s:Application>

接下來是里面的DashedLines：

Java代碼

package lip.charts.chartClasses
{
import flash.display.Graphics;
import flash.geom.Point;
import lip.utils.GraphicUtils;
import mx.charts.chartClasses.CartesianChart;
import mx.charts.chartClasses.CartesianTransform;
import mx.charts.chartClasses.ChartElement;
import mx.charts.chartClasses.ChartState;
import mx.charts.chartClasses.IAxis;
public class DashedLines extends ChartElement
{
public function DashedLines()
{
super();
}
private var _yValue:Number = NaN;
/**
* 該線對應(yīng)的y值
*/
public function get yValue():Number
{
return _yValue;
}
/**
* @private
*/
public function set yValue(value:Number):void
{
_yValue = value;
invalidateDisplayList();
}
/**
* 實線部分的長度
* @default 10
*/
public var length:Number = 10;
/**
* 空白部分的長度
* @default 5
*/
public var gap:Number = 5;
/**
* 線條的寬度
* @default 1
*/
public var lineThickness:Number = 1;
/**
* 線條的顏色
* @default 黑色
*/
public var lineColor:uint = 0;
private var _displayName:String;
/**
* 該線所對應(yīng)的數(shù)值名稱(平均值，最大值等等)
* @default
*/
public function get displayName():String
{
return _displayName;
}
/**
* @private
*/
public function set displayName(value:String):void
{
_displayName = value;
invalidateDisplayList();
}
protected var label:TextField;
override protected function createChildren():void
{
// TODO Auto Generated method stub
super.createChildren();
if(!label)
{
label = new TextField();
label.mouseEnabled = false;
addChild(label);
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (!chart||
chart.chartState == ChartState.PREPARING_TO_HIDE_DATA ||
chart.chartState == ChartState.HIDING_DATA)
{
return;
}
var g:Graphics = this.graphics;
g.clear();
// 如果沒有設(shè)置數(shù)據(jù)，不顯示
if(isNaN(yValue))
{
return;
}
var w:Number = unscaledWidth;
var h:Number = unscaledHeight;
var vAxis:IAxis = CartesianChart(this.chart).verticalAxis;
var y:Number = dataToLocal(0, yValue).y;
var pFrom:Point = new Point(0, y);
var pTo:Point = new Point(w, y);
GraphicUtils.drawDashed(g, pFrom, pTo, this.length, this.gap, this.lineThickness, this.lineColor);
label.text = (displayName ? (displayName + " : ") : "") + yValue;
label.x = 1;
label.y = y > 21 ? y - 21 : y + 1;
}
// 這個方法復(fù)制自LineSeries
override public function dataToLocal(... dataValues):Point
{
var data:Object = {};
var da:Array /* of Object */ = [ data ];
var n:int = dataValues.length;
if (n > 0)
{
data["d0"] = dataValues[0];
dataTransform.getAxis(CartesianTransform.HORIZONTAL_AXIS).
mapCache(da, "d0", "v0");
}
if (n > 1)
{
data["d1"] = dataValues[1];
dataTransform.getAxis(CartesianTransform.VERTICAL_AXIS).
mapCache(da, "d1", "v1");
}
dataTransform.transformCache(da,"v0","s0","v1","s1");
return new Point(data.s0 + this.x,
data.s1 + this.y);
}
}
}

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

Java代碼

package lip.utils
{
import flash.display.Graphics;
import flash.geom.Point;
/**
* 一些繪圖相關(guān)的方法
* @author lip
*/
public class GraphicUtils
{
public function GraphicUtils()
{
}
/**
* 畫虛線
* @param graphics 你懂的
* @param pFrom 起點
* @param pTo 終點
* @param length 實線段的長度
* @param gap 實線段的間距
* @param thickness 線的寬度
* @param color 線的顏色
*/
public static function drawDashed(graphics:Graphics, pFrom:Point, pTo:Point, length:Number = 5, gap:Number = 5, thickness:Number = 1, color:uint = 0):void
{
var max:Number = Point.distance(pFrom, pTo);
var l:Number = 0;
var p3:Point;
var p4:Point;
graphics.lineStyle(thickness, color);
while (l < max)
{
p3 = Point.interpolate(pTo, pFrom, l / max);
l += length;
if (l > max)
l = max;
p4 = Point.interpolate(pTo, pFrom, l / max);
graphics.moveTo(p3.x, p3.y)
graphics.lineTo(p4.x, p4.y)
l += gap;
}
}
}
}