用highcharts写的一个流程图

￡神魔★判官ぃ 2022-08-26 05:52 168阅读 0赞

先来看效果:

![SouthEast][]

再看jsp代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>血缘关系图</title>
        
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">    
    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    	<meta http-equiv="description" content="This is my page">
    	
    	<script type="text/javascript" src="<%=path%>/resources/easyResources/scripts/jquery-1.8.3.min.js"></script>
    	<script type="text/javascript" src="<%=path%>/resources/easyResources/component/highcharts/highcharts.js"></script>
    	<script type="text/javascript">
    	$(function () {
    		var chart = new Highcharts.Chart({
    	        chart: {
    	            renderTo: 'container_drawing',
    	            events: {
    	                load: drawing
    	            }
    	        },
    	        title: {
    	            text: '顾凶杀人流程'
    	        }
    	    });
    	});
    	/* 画图自定义函数 */
    	function drawing(){
            // Draw the flow chart
            var ren = this.renderer;
            var rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5];
            var colors = ['#281f1d','#d71345','#1d953f','#ffe600'];//四种状态对应的颜色:未启动,正在运行,完成,告警
            
            // 分割线1
            ren.path(['M', 400, 40, 'L', 400, 400]).attr({'stroke-width': 3,stroke: 'silver',dashstyle: 'dash'}).add();
            // 分割线2
            ren.path(['M', 800, 40, 'L', 800, 400]).attr({'stroke-width': 3,stroke: 'silver',dashstyle: 'dash'}).add();
            
            // 区域标题
            ren.label('顾拥人', 150,50).css({fontWeight: 'bold'}).add();
            ren.label('杀手', 550, 50).css({fontWeight: 'bold'}).add();
            ren.label('目标', 950, 50).css({fontWeight: 'bold'}).add();
    
            // 遍历生成图形
            /**
            	area:区域编码,值为:0,1,2,null.
            	no:节点序号,值为:0,1,...,N,null.
            	label:节点内容.
            	status:节点状态.值为:0,1,2,3
            	parea:父节点区域编码,值为:0,1,2,null.
            	pno:父节点序号,值为:0,1,...,N,null.
            	var nodes = [{"area":2,"status":3,"no":0,"parent":[{"parea":1,"pno":0},{"parea":1,"pno":1}],"label":"做掉比尔"},{"area":1,"status":1,"no":0,"parent":[{"parea":0,"pno":0},{"parea":0,"pno":1},{"parea":0,"pno":2}],"label":"杀手金钢狼"},{"area":1,"status":0,"no":1,"parent":[{"parea":0,"pno":1},{"parea":0,"pno":3}],"label":"杀手超人"},{"area":0,"status":0,"no":0,"parent":[],"label":"坏人小小"},{"area":0,"status":1,"no":1,"parent":[],"label":"好人莱恩"},{"area":0,"status":2,"no":2,"parent":[],"label":"丽人阿美"},{"area":0,"status":1,"no":3,"parent":[],"label":"仇敌喜羊羊"}];
            */
            var nodes = [{"area":2,"status":3,"no":0,"parent":[{"parea":1,"pno":0},{"parea":1,"pno":1}],"label":"做掉比尔"},{"area":1,"status":1,"no":0,"parent":[{"parea":0,"pno":0},{"parea":0,"pno":1},{"parea":0,"pno":2}],"label":"杀手金钢狼"},{"area":1,"status":0,"no":1,"parent":[{"parea":0,"pno":1},{"parea":0,"pno":3}],"label":"杀手超人"},{"area":0,"status":0,"no":0,"parent":[],"label":"坏人小小"},{"area":0,"status":1,"no":1,"parent":[],"label":"好人莱恩"},{"area":0,"status":2,"no":2,"parent":[],"label":"丽人阿美"},{"area":0,"status":1,"no":3,"parent":[],"label":"仇敌喜羊羊"}];
            for(var i=0;i<nodes.length;i++){
            	var node = nodes[i];
            	ren.label(node.label, 100+node.area*400, 110+node.no*60).attr({fill: colors[node.status],stroke: '#f2eada','stroke-width': 2,padding: 5,r: 5,width:200,height:30}).css({color: 'white',fontWeight:'bold',fontSize:'16px',textAlign:'center'}).add().shadow(true);
            	for(var j=0;j<node.parent.length;j++){
            		var parent = node.parent[j];
            		ren.path(['M', 100+node.area*400, 110+node.no*60+20, 'L', 100+parent.parea*400+200+10, 110+parent.pno*60+20]).attr({'stroke-width': 2,stroke: '#843900'}).translate(0, 0).add();
            	}
            }
    	}
    	</script>
      </head>
      
      <body>
    	<div>
    		<div id="kindred_chart">
    			<div id="container_drawing" style="width:100%;height:400px;"></div>
    		</div>
    		[{"area":2,"status":3,"no":0,"parent":[{"parea":1,"pno":0},{"parea":1,"pno":1}],"label":"做掉比尔"},{"area":1,"status":1,"no":0,"parent":[{"parea":0,"pno":0},{"parea":0,"pno":1},{"parea":0,"pno":2}],"label":"杀手金钢狼"},{"area":1,"status":0,"no":1,"parent":[{"parea":0,"pno":1},{"parea":0,"pno":3}],"label":"杀手超人"},{"area":0,"status":0,"no":0,"parent":[],"label":"坏人小小"},{"area":0,"status":1,"no":1,"parent":[],"label":"好人莱恩"},{"area":0,"status":2,"no":2,"parent":[],"label":"丽人阿美"},{"area":0,"status":1,"no":3,"parent":[],"label":"仇敌喜羊羊"}]
    	</div>
      </body>
    </html>

以上最重要的部分就是节点json串啦,如果是从数据库查询这些节点数据,应该怎么办呢?

以一个表为例,表结构:

![SouthEast 1][]

插入一些数据:

![SouthEast 2][]

oracle sql 查询语句:

![SouthEast 3][]

解析成json串:

//{area:2,no:0,label:"node",status:0,parent:[{parea:1,sno:0},{parea:1,pno:1}]}
    	/**
    	 * 
    	 * @param jo 用来保存json串
    	 * @param list 数据列表
    	 */
    	private void trans(JSONObject jo, List list) {
    		//给List中每个Map中加area和no
    		int a = 0;
    		int b = 0;
    		int c = 0;
    		for(int i=0;i<list.size();i++){
    			Map map = (Map)list.get(i);
    			String level = map.get("LEVEL").toString();
    			if(level.equals("1")){
    				map.put("area", 2);
    				map.put("no", a++);
    			}else if(level.equals("2")){
    				map.put("area", 1);
    				map.put("no", b++);
    			}else if(level.equals("3")){
    				map.put("area", 0);
    				map.put("no", c++);
    			}
    		}
    		System.out.println("=====trans==111=list==="+list);
    		//给List中每个Map中加parent
    		for(int i=0;i<list.size();i++){
    			Map map = (Map)list.get(i);
    			String pIds = map.get("P_ITEM_ID")==null?null:map.get("P_ITEM_ID").toString();
    			Object[] o = new Object[0];
    			if(pIds!=null){
    				String[] strs = pIds.split(",");
    				o = new Object[strs.length];
    				for(int j=0;j<strs.length;j++){
    					for(int k=0;k<list.size();k++){
    						Map km = (Map)list.get(k);
    						String id = km.get("ITEM_ID").toString();
    						if(id.equals(strs[j])){
    							Map pm = new HashMap();
    							pm.put("parea", km.get("area"));
    							pm.put("pno", km.get("no"));
    							o[j] = pm;
    							System.out.println("====o[jjjj]==="+Arrays.toString(o));
    						}
    					}
    					
    				}
    			}
    			map.put("parent", o);
    		}
    		System.out.println("=====trans==222=list==="+list);
    		//转换成json串
    		List<Map> trans = new ArrayList();
    		for(int i=0;i<list.size();i++){
    			Map map = (Map)list.get(i);
    			Map lm = new HashMap();
    			lm.put("area", map.get("area"));
    			lm.put("no", map.get("no"));
    			lm.put("label", map.get("ETL_NAME"));
    			lm.put("status", map.get("STATUS"));
    			lm.put("parent", map.get("parent"));
    			trans.add(lm);
    		}
    		jo.put("nodes", JSONArray.fromObject(trans));
    		System.out.println("nodes:===="+jo.getString("nodes"));
    	}

基本思路:传一个itemId,查询其上级节点,只查三级,然后生成json串,最后生成图.

[SouthEast]: /images/20220824/9d0b56a0691b4ddabc26ffc79274e3ae.png
[SouthEast 1]: /images/20220824/889ce5658d49483a803f7f2beed48595.png
[SouthEast 2]: /images/20220824/e40a7287648d4db4b799ab86cf7c7818.png
[SouthEast 3]: /images/20220824/f6a913d8eb1e47fcae1e361adcc9a395.png