1.该图表的数据源为ArrayCollection类型的arrayC
2.每增加一条线,其实就是增加一个数据源中的ArrayCollection每个对象的一个属性,且属性名不能重复
3.修改ArrayCollection后,同时修改LineChart的series
实例中,新增,即为新增一个line的数据ArrayCollection,里面对象的结构为 ,时间Date,设备名称(“设备+随机数”),时间的值是1-12小时,设备名称的值是一个随机数
private function createArray():ArrayCollection{
var ac:ArrayCollection = new ArrayCollection();
var name:String = "设备"+ Math.floor(Math.random()*10);
for(var i:int=0;i<12;i++){
var o:Object = new Object();
o.Date = i+"时";
o[name] = Math.floor(Math.random()*10);
ac.addItem(o);
}
return ac;
}
而后判断,如果是新增line,直接将该ArrayCollection作为lineChart的数据源;否则修改lineChart的数据源,将新增line设备名称属性,作为lineChart的数据源的一个新属性
此时出现的问题是,新增一个line的数据ArrayCollection的对象除了时间Date是固定的,其他属性(设备名称) 其实是动态生成的,也就说,这是个动态对象。要获取动态对象的属性方法如下
/** 返回对象的某个属性名称
* @author kkkloveyou 2012-10-23
* @param obejct 动态对象
* @param index 要获取第几个对象的属性
* @return name
*/
public function getObjectProperties(obejct:Object,index:int):String{
var objInfo:Object = ObjectUtil.getClassInfo(obejct);
//获取到对象的属性列表
var fieldName:Array = objInfo["properties"] as Array;
return fieldName[index];
}
ObjectUtil 类是一个全静态类,["properties"]可以返回对象属性的数组,只要知道属性在对象中的排位,就可以获得该属性名 ,动态生成数据源如下:
/*判断 数据源是否为空,为空直接放入第一个ArrayCollection对象 ,否则 将自己的第二个属性值加入到数据源中*/
if(arrayC.length>0){
var newAc:ArrayCollection = createArray();
for(var a:String in arrayC){
for(var b:String in newAc){
if(arrayC[a].Date == newAc[b].Date){
var name :String = getObjectProperties(newAc[b] ,1);
arrayC[a][name] = newAc[b][name];
trace("增加属性:"+newAc[b][name]);
break;
}
}
}
}else{
arrayC = createArray();
}
/*根据数据源动态生成线*/
/*1.取出每个要增加对象的属性 name */
/* 拿到ArrayCollection的第一个对象,就可以拿到他的所有属性名*/
var obejct:Object = arrayC.getItemAt(0);
var objInfo:Object = ObjectUtil.getClassInfo(obejct);
var fieldNames:Array = objInfo["properties"] as Array;
var newFileNames:Array = [];
for each(var q:String in fieldNames){
if(q!="Date"){
newFileNames.push(q);
}
}
数据源更新了以后,只需要按照数据源arrayC中对象属性名,生成相应的LineSeries,并将LineSeries 添加到LineChart的series即刻
/*2.根据name 取出相应 对象值*/
array = [];
for(var b:String in newFileNames){
var lineSeries:LineSeries=new LineSeries(); //设置图表的系列
lineSeries.xField="Date"
lineSeries.yField = newFileNames[b];
lineSeries.displayName = newFileNames[b];
lineSeries.setStyle("form", "curve");
//lineSeries.setStyle("lineStroke",s1);
//替换或者新增
array.push( lineSeries );
}
myChart.series = array;//给图表系列赋值
移除一条line的过程是相反的,也是类似,首先修改数据源的arrayC,将要移除的属性删除,而后相应的修改myChart.series
/** 移除数据
* @author kkkloveyou 2012-10-23
* @return name 要删除的属性名
*/
private function removeFromArray(name:String):void{
for(var a:String in arrayC){
trace("删除属性:"+arrayC[a][name]);
delete arrayC[a][name];
}
array = [];
for(var b:String in myChart.series){
if(myChart.series[b].yField !=name){
array.push(myChart.series[b]);
}
}
myChart.series = array ;
legend_id.dataProvider = myChart;
}
完整实例 下载 地址:http://download.csdn.net/detail/kkkloveyou/4705198
分享到:
相关推荐
flex4 动态获取对象属性,动态生成数据源,动态生成lineChart,清除数据。 1.该图表的数据源为ArrayCollection类型的arrayC 2.每增加一条线,其实就是增加一个数据源中的ArrayCollection每个对象的一个属性,且属性...
Flex BlazeDs 推数据生成lineChart实例 前台生成lineChart 实时监控可作参考
以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。
Flex Chart Sytles 简单示例 基本样式使用,网上搜到的收藏下。
改变datatips显示字体大小的方法,也可以跟据这种方法自己定义别的样式。 包含了linechart样式的改变,颜色也可以改变
flex动态生成datagrid表头,外加linechart的简单操作,值得学习!
flex项目开发过程中的动态linechart,主要是曲线可以增量的刷新,纵坐标、刷新频率可以调整,也可以稍微改下根据配置进行曲线设置,这个是少了获取数据的方法用随机数代替,项目中用到动态linechart的可以参考。
自已做的flex动态生成图形,决对能用!其中含有jsp例子,用js封装对象(含注释)可演示看一下。图形的类型有,柱图,线图,饼图,股票图,及几种组合。是在开发项目中做的,代码写的不是太规范,不过还是能用的。给...
flex LineChart实例个人项目开发中的一个页面
FLEX4实践—动态生成DataGrid及应用客户化itemRenderer.doc
flexBulider页面加载动态图片的显示
动态添加曲线条数 通过传递lablefild,和dataProvider的数组实现动态添加曲线
flex动态生成checkbox,方便多项选择维护更新
flex 动态生成树
flex动态生成LinChart的曲线条数
FLEX 动态树 动态图表 FLEX 动态树 动态图表
这里不是用放射生成checkbox组,用循环动态生成checkbox组,只要自己改一下数据源,则可应用!
学习使用Flex Chart。 只用控件,不会AS不要紧。
使用flex绘制折线图,分为单线和双线,flash工具为4.5,可以直接运行
该flex应用程序演示了柱状图动态切换数据源 (event)"> 苹果" yField="apple" click="columnseries1_clickHandler(event)"/> 桔子" yField="orange" /> <!--梨" yField="pear"/>--> ...