ext-anychart饼图呈现取自数据库中的数据-白红宇

ext-anychart饼图呈现取自数据库中的数据

阅读量：6994 次

发布时间：2019-06-27

本文共 3874 字，大约阅读时间需要 12 分钟。

1、类PatrolMonitor中有一个方法，其中sql语句是根据需求来写的。

public Map
     
      > getALXBarData2() {		Map
      
       > map = new HashMap
       
        >();		Map
        
          tempMap_1 = new TreeMap
         
          ();		Map
          
            tempMap_2 = new TreeMap
           
            (); Map
            
              tempMap_3 = new TreeMap
             
              (); SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH"); Connection con = null; Statement stat = null; ResultSet rs = null; String sql = ""; String result = ""; try { con = DataService.getConnection(); stat = con.createStatement(); sql = "select b.EXEC_TIME, count(STATUS),STATUS " + " FROM PATROL3_JOB_RESULT_CONTENT a," + " (select convert(char(4), datepart(yy, EXEC_TIME)) + '-' +" + " convert(char(2), datepart(mm, EXEC_TIME)) + '-' +" + " convert(char(2), datepart(dd, EXEC_TIME)) + " + " convert(char(2), datepart(hh, EXEC_TIME)) EXEC_TIME," + " RESULT_ID" + " FROM PATROL3_JOB_RESULT" + " where TASK_ID = '1199d0a7a4a540f2'" + " and EXEC_TIME <= (select max(EXEC_TIME)" + " FROM PATROL3_JOB_RESULT" + " where TASK_ID = '1199d0a7a4a540f2')" + " and EXEC_TIME >" + " dateadd(hh," + " -6," + " (select max(EXEC_TIME)" + " FROM PATROL3_JOB_RESULT" + " where TASK_ID = '1199d0a7a4a540f2'))) b" + " where STATUS in (0,10001,10002) " + " and a.RESULT_ID = b.RESULT_ID" + " group by b.EXEC_TIME,STATUS"; rs = stat.executeQuery(sql); while (rs.next()) { String time = rs.getString(1); String cnt = rs.getString(2); String status = rs.getString(3); result = time + "&&" + cnt + "&&" + status; Date dt = format.parse(time); if (status.trim().equals("0")) { tempMap_1.put(dt, result); } else if (status.trim().equals("10001")) { tempMap_2.put(dt, result); } else if (status.trim().equals("10002")) { tempMap_3.put(dt, result); } } map.put("0", tempMap_1); map.put("1", tempMap_2); map.put("2", tempMap_3); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return map; }

2、js中拼接anyChart样例中得xml。把上个方法中取到的值传入到xml中。用饼图呈现。

var panel2 = new Ext.Panel({		title : '饼图',		width : Ext.lib.Dom.getViewWidth() * 0.37,		height : Ext.lib.Dom.getViewHeight()*0.27,		items : [new Ext.Panel({			loadMask : ({				msg : '数据加载中...'			}),			autoWidth : true,			//height : 170,			layout : 'fit',			id : "flashpane2",			border : false,			html : "
     
             
                      
      
     
"		})]	})	document.getElementById("grid2").innerHTML = "";	document.getElementById("grid2").align = "left";	panel2.render("grid2");	patrolMonitor.getPieData(function(data) {		var dateArr_1 = data;		var xml2 = "
     
      "				+ "	
      "				+ "	
      
       "				+ "		
       
        "				+ "			
        
         "				+ "				
         
          "				+ "					
          
           " + " 
           
           " + " 
           
            " + " 
            " + " 
           " + " 
          "				+ "					
          
           " + " 
           " + " 
           " + " 
           " + " 
           
           " + " 
           
            " + " 
            
             " + " 
             " + " 
            " + " 
           " + " 
          "				+				/*				 * " 
          "+				 */				"				
         " + "			
        "				+ "			
        
         " + "				
         "				+ "			
        " +				"			
        ";		xml2 += "
         
          ";		for (var i = 0; i < dateArr_1.length; i++) {			var dataStr = dateArr_1[i];			var devicename = dataStr.split('&&')[0];			var num1 = dataStr.split('&&')[1];			var num2 = dataStr.split('&&')[2];			var num3 = dataStr.split('&&')[3];			// alert(num3);			xml2 += "
          
           " + " 
           
            " + " 
            
             不正常数
            " + " 
            
             " + num1 + "
            " + " 
            
             异常数
            " + " 
            
             " + num2 + "
            " + " 
           " + "
          ";		}		xml2 += "
         ";		xml2 += "				" + " 		
        " + "	
      " + " 
      ";		var chartSample = new AnyChart('./anyChart/AnyChart.swf');		chartSample.width = Ext.lib.Dom.getViewWidth() * 0.36;		chartSample.height=Ext.lib.Dom.getViewHeight()*0.27-27;		//chartSample.height = 174;		chartSample.setData(xml2);		chartSample.write('flashpane2');	});