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

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');

	});