直接上效果图
testp.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()" fontSize="12" backgroundColor="#FFFFFF"
layout="horizontal" minWidth="955" minHeight="600" xmlns:s="library://ns.adobe.com/flex/spark" horizontalAlign="center" verticalAlign="middle" xmlns:services="services.*">
<mx:Panel id="panelpp" width="1218" height="546" layout="absolute" title="资金流分析图" x="-23" y="26">
<mx:DataGrid id="dataG" x="10" y="38" height="465" doubleClickEnabled="true" doubleClick="dataG_doubleClickHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="资金源" dataField="label"/>
</mx:columns>
</mx:DataGrid>
<mx:ComboBox id="dataC" x="10" y="10" editable="true" width="102" dataProvider="{peopleArr1}"></mx:ComboBox>
<mx:Canvas id="cans" x="111" y="24" width="945" height="479" horizontalScrollPolicy="off" verticalScrollPolicy="off" textAlign="center">
</mx:Canvas>
<s:Button id="selectBtn" x="120" y="5" label="查询" click="selectBtn_clickHandler(event)"/>
<!--<s:Button x="199" y="5" label="线条变色" click="button1_clickHandler(event)"/>-->
</mx:Panel>
<mx:Script>
<![CDATA[
import com.adobe.serialization.json.JSON;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
private var point:Point;
private var line:LinkLine;
private var map:LinkMap;
private var pointArr:ArrayCollection;
private var lineArr:ArrayCollection;
private var mapArr:ArrayCollection;
[Bindable]
private var peopleArr:ArrayCollection;
[Bindable]
private var relationArr:ArrayCollection;
[Bindable]
private var peopleArr1:ArrayCollection;
private var colorArr:Array=["0xFF00FF","0xFF0000","0xf03455","0x00FF00","00ff34ff","99121212","12232323","32343434","00454545","67676767","90878700"];
private var k:int=0;
private var i:int;
private var j:int;
public var a:int;
public var c:int;
private var idbegin:String="1000";
// 页面加载即启动
private function init():void{
addEventListener(DoubleImageEvent.MYEVENT,handle);
peopleArr1=new ArrayCollection([
{"id":"1000","idx":"0","idy":"0","label":"张1000"},
{"id":"1001","idx":"1","idy":"0","label":"张2"},
{"id":"1002","idx":"1","idy":"1","label":"张3"},
{"id":"1003","idx":"2","idy":"0","label":"张4"},
{"id":"1004","idx":"2","idy":"1","label":"张5"},
{"id":"1005","idx":"3","idy":"0","label":"张6"}
]);
serviceInvoke();
}
private function serviceInvoke():void{
getNewArrResult.token = userRefresh.getNewArr(idbegin);
getNewRelationResult.token = userRefresh.getNewRelation(idbegin);
}
protected function selectBtn_clickHandler(event:MouseEvent):void
{
idbegin=this.dataC.selectedItem.id;
this.cans.removeAllChildren();
serviceInvoke();
}
// 布局
protected function getNewArrResult_resultHandler(event:ResultEvent):void
{
var rawArray:Array;
var rawData:String = event.result as String;
rawArray = JSON.decode(rawData) as Array;
peopleArr = new ArrayCollection(rawArray);
this.dataG.dataProvider=peopleArr;
peopleArr.refresh();
getMap();
}
private function getMap():void{
pointArr=new ArrayCollection();
a=peopleArr.length;
// 固定节点位置
for(i=0;i<a;i++){
var x1:int=160*(int(peopleArr[i].idx)+0.5);
var y1:int=80*(int(peopleArr[i].idy)+0.5);
point=new Point(x1,y1);
// 点集合
pointArr.addItem(point);
}
//Alert.show(pointArr.length+"");
// 画节点
mapArr=new ArrayCollection();
lineArr=new ArrayCollection();
for(i=0;i<a;i++){
map=new LinkMap(pointArr[i],100,80,peopleArr[i].label.toString(),peopleArr[i].id.toString());
// 图形节点集合
mapArr.addItem(map);
this.cans.addChild(mapArr[i]);
}
}
// 线
protected function getNewRelationResult_resultHandler(event:ResultEvent):void
{
var rawArray:Array;
var rawData:String = event.result as String;
rawArray = JSON.decode(rawData) as Array;
relationArr = new ArrayCollection(rawArray);
getLine();
}
private function getLine():void{
c=relationArr.length;
for(i=0;i<c;i++){
var b:int;
var e:int;
for(j=0;j<peopleArr.length;j++){
if(relationArr[i].id1.toString()==peopleArr[j].id.toString()){
b=j;
}
}
for(j=0;j<peopleArr.length;j++){
if(relationArr[i].id2.toString()==peopleArr[j].id.toString()){
e=j;
}
}
line=new LinkLine();
lineArr.addItem(line);
line.setStartPoint(new Point(mapArr[b].getCenterX(),mapArr[b].getCenterY()));
line.setEndPoint(new Point(mapArr[e].getCenterX(),mapArr[e].getCenterY()));
mapArr[b].setLine(line,true);
mapArr[e].setLine(line,false);
line.setTip(relationArr[i].data);
this.cans.addChild(line);
}
}
//线条颜色控制
/* protected function button1_clickHandler(event:MouseEvent):void
{
for(i=0;i<c;i++){
lineArr[i].setLineColor(colorArr[k]);
lineArr[i].drawLine();
k++;
if(k>=colorArr.length)
k=0;
}
} */
// 双击列表刷新dataGrid
protected function dataG_doubleClickHandler(event:MouseEvent):void
{
idbegin=dataG.selectedItem.id;
this.cans.removeAllChildren();
serviceInvoke();
}
// 点击图片刷新数据
private function handle(e:DoubleImageEvent):void{
idbegin=e.getId();
this.cans.removeAllChildren();
serviceInvoke();
}
]]>
</mx:Script>
<mx:CallResponder id="getNewRelationResult" result="getNewRelationResult_resultHandler(event)"/>
<services:UserRefresh id="userRefresh" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
<mx:CallResponder id="getNewArrResult" result="getNewArrResult_resultHandler(event)"/>
<mx:CallResponder id="getPeopleArrsResult"/>
</mx:Application>
图1是程序加载的默认图,图2是以张三为源的关系图,可以双击张3的dataGrid列表或者图标都可以实现自动更新图片以及他们的拓扑关系!
我给出全部代码给大家分享,下面是部分的mxml的主应用程序中的代码,看看是不是大家要的,想要完整代码可以直接下载附件!
附件项目部署说明:第一个和第二个压缩文件分别是flex和java端的项目写的已经很清楚了,只要有这两个源文件,java端部署tomcat,flex端服务器配置好,效果就可以出来!
若果不会配想看效果,就要用到第三个压缩文件了,把此文件解压后放到tomcat webapps文件夹下,启动tomcat,把flex端代码的服务器配置路径配置到刚才粘贴的文件上,
最后打开运行项目主程序,效果出来了,祝你好运!
第一次发自己的成果,不足之处多包涵,希望和大家一起讨论技术,共同进步!
- 大小: 17.3 KB
- 大小: 14.6 KB
分享到:
相关推荐
flex做的一个拓扑图demo,写的比较清晰。
项目本人开发 ,数据库自己设计,导入myeclipse 可使用
flex做拓扑图的组件flex做拓扑图的组件flex做拓扑图的组件
基于Flex的实时网络拓扑图呈现系统的设计与实现,章碧云,,本文介绍了一种基于Flex实现的实时拓扑图可视化呈现系统的设计与实现,通过XML文件实现通信接口的设计,利用MVC架构实现了Flex呈现系�
flex CSV解析 拓扑图绘制
flex 拓扑绘图
这里面包含了两个类库(Spring和YI个高人写的库)大家可以参考下对于那些没有积分的友友可以发邮件索要 ownwell@126.com 一起学习flex画图的相关的
下载导入flex开发环境,即可使用。flex4 mysql dom4j
NULL 博文链接:https://tydldd.iteye.com/blog/2041060
flex总制作可拖拽的网络拓扑图实例. 基于spark组件的拖拽功能的源码改写,具有比较完美的拖拽效果。
此原文件主要是来做做谱图,代码精简,但是并不够强大,麻烦各位有空增强在上传,供给其他同胞们
SrpingGranph 动态生成 拓扑图 非常酷的flex拓扑关系组件springgraph。-Topological relationships are very cool flex component springgraph.
基于网上一个WorkFlowDesigner的资源
在其他论坛上一个高手分享的,可以看一下 很多东西还是值得借鉴的
免费的Flex拓扑组件,可用于拓扑图、关系图、流程图的绘制,不输与Twaver的展现效果及完善的扩展机制和中文API文档 详细效果 iolive.duapp.com
NULL 博文链接:https://aideqianfang.iteye.com/blog/680401
这个真实项目中的一个拓扑图Demo的前期版。
flex拓扑 详细设计参考文档 文档仅供参考
FLEX画图之各种柱状图饼状图画法
毕业论文基于Flex的网络拓扑图的绘制工具