- 浏览: 67307 次
- 性别:
- 来自: 北京
最新评论
-
truelove12358:
坑爹啊楼主,文件名与包名、类名不一致,导致一直报坑爹的1 ...
Flex4 用LineChart实现实时曲线图,并在其中添加自定义的虚线水平线 -
pr0608:
在你的皮肤上改了一下,变成透明无边框的皮肤了!终于搞定了 b ...
flex 圆形按钮皮肤的制作 -
天马行空洞:
这个实例很好使用。我也提个建议,我用的时候DashedLine ...
Flex4 用LineChart实现实时曲线图,并在其中添加自定义的虚线水平线 -
neusoft_jerry:
按照楼主的办法,问题解决了。谢谢!同时,回答楼主最后的体温,到 ...
flex 4 的Panel设置右键菜单的问题 -
lipbb:
java_stream 写道表示没图片……自己找几张图片放过去 ...
flex4 为垂直滚动条VScrollBar换肤
本示例首先是为了显示实时曲线。然后呢,要显示个水平线,比如我要显示一个变量的变化过程,但它有一个标准值,就可以用该种方式。
示例:
然后是代码:
先看Application:
接下来是里面的DashedLines:
还有其中用到的GraphicUtils.drawDashed()方法:
代码不太多,就不详细解释了。
它就是把Date转为一个字符串,这个自己写一下吧。实际上就是包装一下flex自带的DateFormatter或者DateTimeFormatter
谢了。
:D 不错
不过建议你还是换个博客吧,百度的不支持贴代码格式,看起来好费劲
是,而且不能上传附件,很麻烦
:D 不错
不过建议你还是换个博客吧,百度的不支持贴代码格式,看起来好费劲
对于双坐标图表,这种画法是不对的
它就是把Date转为一个字符串,这个自己写一下吧。实际上就是包装一下flex自带的DateFormatter或者DateTimeFormatter
示例:
然后是代码:
先看Application:
<?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:
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值 */ 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; /** * 该线所对应的数值名称(平均值,最大值等等) * @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(); // 如果没有设置数据,不显示 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; } // 这个方法复制自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()方法:
package lip.utils { import flash.display.Graphics; import flash.geom.Point; /** * 一些绘图相关的方法 * @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; } } } }
代码不太多,就不详细解释了。
评论
14 楼
truelove12358
2016-03-01
坑爹啊楼主,文件名与包名、类名不一致,导致一直报坑爹的1024错误,不能解析为组件,坑坑坑,找了我2天
13 楼
天马行空洞
2014-12-02
这个实例很好使用。我也提个建议,我用的时候DashedLines.as里面的这一句定义不能被引用:protected var label:TextField;改为private var label:TextField;就可以了。
12 楼
516456267
2012-10-18
lipbb 写道
516456267 写道
import lip.utils.DateFormatter
这个代码呢?
这个代码呢?
它就是把Date转为一个字符串,这个自己写一下吧。实际上就是包装一下flex自带的DateFormatter或者DateTimeFormatter
谢了。
11 楼
chensong215
2012-08-31
lipbb 写道
chensong215 写道
对于双坐标画水平线,可参考http://hi.baidu.com/chensong_blog/item/77070e392b11db617d034bdd
有图有代码
有图有代码
:D 不错
不过建议你还是换个博客吧,百度的不支持贴代码格式,看起来好费劲
是,而且不能上传附件,很麻烦
10 楼
lipbb
2012-08-30
chensong215 写道
对于双坐标画水平线,可参考http://hi.baidu.com/chensong_blog/item/77070e392b11db617d034bdd
有图有代码
有图有代码
:D 不错
不过建议你还是换个博客吧,百度的不支持贴代码格式,看起来好费劲
9 楼
chensong215
2012-08-29
对于双坐标画水平线,可参考http://hi.baidu.com/chensong_blog/item/77070e392b11db617d034bdd
有图有代码
有图有代码
8 楼
chensong215
2012-08-29
JavaScape 写道
找了很久 画横线的方法 ;
有很多解决方案,
但是个人感觉这个方法最合理!
楼主英明 谢谢了!
有很多解决方案,
但是个人感觉这个方法最合理!
楼主英明 谢谢了!
对于双坐标图表,这种画法是不对的
7 楼
JavaScape
2012-05-19
找了很久 画横线的方法 ;
有很多解决方案,
但是个人感觉这个方法最合理!
楼主英明 谢谢了!
有很多解决方案,
但是个人感觉这个方法最合理!
楼主英明 谢谢了!
6 楼
lipbb
2012-05-18
516456267 写道
import lip.utils.DateFormatter
这个代码呢?
这个代码呢?
它就是把Date转为一个字符串,这个自己写一下吧。实际上就是包装一下flex自带的DateFormatter或者DateTimeFormatter
5 楼
516456267
2012-05-17
import lip.utils.DateFormatter
这个代码呢?
这个代码呢?
4 楼
zy14shadow
2012-04-18
有用的事例!!!
3 楼
live711
2012-02-07
2 楼
lipbb
2011-12-20
1 楼
A80082828
2011-12-15
DateFormatter 这个怎么写啊 项目要用到一个这样的功能,以前没有接触过flex
发表评论
-
使用百度或谷歌服务将文字转语音
2013-09-24 09:47 5395private function test():void ... -
为Flex Tree控件构造树形结构数据
2013-07-26 16:02 3868将数据库里查出来的列表结构转为树形结构的ArrayCollec ... -
flex samples
2013-05-07 17:34 880在github上放了个项目 https://github.co ... -
flex 与 js 通信的小例子
2013-04-08 15:43 936见附件 需要注意的几点: 1. html中,嵌入swf时有al ... -
flex4 为垂直滚动条VScrollBar换肤
2012-12-28 11:22 5912为垂直滚动条换肤是一件比较麻烦的事情。且让我们一步一步来实现。 ... -
flex 圆形按钮皮肤的制作
2012-12-21 10:29 3645要做一个圆形按钮,在flex4里最直接的方法就是为button ... -
flex 中XML操作的一个陷阱
2012-11-05 16:51 1057先来段代码 //测试 var xml1:XM ... -
Flex DataGrid 分页
2012-06-26 15:21 1367一般说来分为两种情况:前台分页和后台分页。 前台分页是指把数 ... -
Flex 自定义 Validator
2012-05-03 15:10 2516flex 自定义验证器(Validator),先看下示例(有点 ... -
flex 4 的Panel设置右键菜单的问题
2012-04-24 15:06 2128在flex4的s:Panel中添加右键菜单,下面的this是p ... -
关于实时绘制音频播放的波形
2012-03-22 16:01 2054请参考flash.media.SoundMixer类的comp ... -
Flex4 弹出窗口滑入滑出
2011-08-15 16:49 4568先看示例: 代码SimpleMessageBox: ... -
DataGrid中用CheckBox实现全选功能
2011-08-11 16:51 2737在表格的操作中,经常有这种需求:某一列用来做选择,在标题上的有 ... -
Flex4使用背景图片
2011-08-05 10:45 3374flex3的时候,Container是有backgroundI ... -
StringValidator的使用
2011-08-04 17:33 1023今天使用StringValidator的时候遇到一个问题,如图 ... -
Flex4水平缩放LineChart并使用滚动条浏览
2011-07-14 15:44 4789适用于当LineChart显示的数据较多时(这时x轴上的标签会 ... -
使用filters中的ColorMatrixFilter
2011-06-30 17:34 1361flex4sdk中可以使用flash.filters.Colo ...
相关推荐
flex曲线图,实时更新,生成的flash文件,actionscript文件和mxml文件
动态添加曲线条数 通过传递lablefild,和dataProvider的数组实现动态添加曲线
以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。
改变datatips显示字体大小的方法,也可以跟据这种方法自己定义别的样式。 包含了linechart样式的改变,颜色也可以改变
Flex Chart Sytles 简单示例 基本样式使用,网上搜到的收藏下。
flex项目开发过程中的动态linechart,主要是曲线可以增量的刷新,纵坐标、刷新频率可以调整,也可以稍微改下根据配置进行曲线设置,这个是少了获取数据的方法用随机数代替,项目中用到动态linechart的可以参考。
高级flex 曲线图 效果实现, Flex 拖动,滚动曲线图 LineChart 非常的使用
flex LineChart实例个人项目开发中的一个页面
flex多曲线图,支持多曲线、曲线滚动显示,鼠标悬停显示值
flex4 自定义事件 用法 源码 完整项目导入可运行
Flex4自定义组件 介绍了flex中如何自定义组件以及相关应用
很好用的代码~~从我自己的程序中取出来的~~
Flex BlazeDs 推数据生成lineChart实例 前台生成lineChart 实时监控可作参考
Flex 饼状、柱状、实时曲线图 精华中的精华 经本人修改完整代码提供学习
flex as3虚线
flex4 动态获取对象属性,动态生成数据源,动态生成lineChart,清除数据。 1.该图表的数据源为ArrayCollection类型的arrayC 2.每增加一条线,其实就是增加一个数据源中的ArrayCollection每个对象的一个属性,且属性...
Flex4 自定义通用ImageButton
一个完成的Flex4 Air 自定义窗口,可以缩小到托盘中,后台运行
. Flex实时曲线,具有流动效果,可以修改代码,实现是否流动。
flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图...