zoukankan      html  css  js  c++  java
  • extanychart饼图呈现取自数据库中的数据

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

    public Map<String, Map<Date, String>> getALXBarData2() {
    		Map<String, Map<Date, String>> map = new HashMap<String, Map<Date, String>>();
    		Map<Date, String> tempMap_1 = new TreeMap<Date, String>();
    		Map<Date, String> tempMap_2 = new TreeMap<Date, String>();
    		Map<Date, String> tempMap_3 = new TreeMap<Date, String>();
    		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 : "<table width=100% height=140><tr></tr><tr><td align=center><img  src='images/loadmask.gif'/></td></tr></table>"
    		})]
    	})
    	document.getElementById("grid2").innerHTML = "";
    	document.getElementById("grid2").align = "left";
    	panel2.render("grid2");
    
    	patrolMonitor.getPieData(function(data) {
    		var dateArr_1 = data;
    		var xml2 = "<anychart>"
    				+ "	<margin left='-10' right='-10' top='-40' bottom='-40'/>"
    				+ "	<charts>"
    				+ "		<chart plot_type='Pie'>"
    				+ "			<data_plot_settings enabled_3d_mode='false'>"
    				+ "				<pie_series >"
    				+ "					<tooltip_settings enabled='true'>"
    				+ "						<format><![CDATA[{%Name}\r\n{%axisName1}:{%num1}{numDecimals:0}\r\n{%axisName2}:{%num2}{numDecimals:0}\r\n总数:{%Value}{numDecimals:0}]]></format>"
    				+ "						<background>"
    				+ "							<corners type='Rounded' right_bottom='2'/>"
    				+ "						</background>"
    				+ "					</tooltip_settings>"
    				+ "					<label_settings enabled='true' mode='Outside' >"
    				+ "						<background enabled='false'/>"
    				+ "						<position padding='3'/>"
    				+ "						<font bold='false'/>"
    				+ "						<format><![CDATA[{%Name}\r\(总数:{%Value}{numDecimals:0})]]></format>"
    				+ "						<states>" + "							<hover>"
    				+ "								<font underline='false'/>" + "							</hover>"
    				+ "						</states>"
    				+ "					</label_settings>"
    				+
    				/*
    				 * " <connector enabled='True' color='%Color' opacity='1'
    				 * thickness='1' padding='20'/>"+
    				 */
    				"				</pie_series>" + "			</data_plot_settings>"
    				+ "			<chart_settings >" + "				<title enabled='false'/>"
    				+ "			</chart_settings>" +
    
    				"			<data>";
    		xml2 += "<series name='' type='Pie'>";
    
    		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 += "<point name='" + devicename + "' y='" + num3 + "'>"
    					+ "	<attributes>"
    					+ "       <attribute name='axisName1'>不正常数</attribute>"
    					+ "		<attribute name='num1'>" + num1 + "</attribute>"
    					+ "       <attribute name='axisName2'>异常数</attribute>"
    					+ "		<attribute name='num2'>" + num2 + "</attribute>"
    					+ "	</attributes>" + "</point>";
    		}
    
    		xml2 += "</series>";
    
    		xml2 += "				</data>" + " 		</chart> " + "	</charts>" + " </anychart> ";
    
    		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');
    
    	});
    
  • 相关阅读:
    Develop offline-capable canvas apps
    Build offline apps with new PowerApps capabilities
    Set up and deploy on-premises environments
    Implementing Offline Capability In PowerApps App
    Implementing Offline Capability In PowerApps App
    Integrating PowerApps and D365 for FO
    How to bulk upload/copy a folder structure and files to SharePoint
    Integrated customer master with power platform
    Sales Order integration with PowerPlatform
    Dual-Write for Dynamics 365 and Dynamics 365 Finance and Operation
  • 原文地址:https://www.cnblogs.com/kunpengit/p/2279534.html
Copyright © 2011-2022 走看看