ext-anychart柱狀圖呈現取自資料庫中的資料

1、類PatrolMonitor採用Map儲存資料。該例子select語句查出了3個欄位。用time,cnt,status來表示。然後用&&拼接在一起，給result.0、10001、10002分別表示正常，不正常，異常（這是根據需求寫的，用在別處重新定義即可）。

public Map<String ,Map<Date,String>> getALXBarData(){
  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 。。。。。" +
";  
   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) {
   e.printStackTrace();
  }
return map;
 }

2、在js中呼叫上面取到的資料。有三個柱狀圖的對比（對應在3個for迴圈）。

Ext.onReady(function() {
	var panel1 = new Ext.Panel({
		title : '柱狀圖呈現',
		autoWidth : true,
		height:200,
		items : [new Ext.Panel({
				   loadMask:({msg:'資料載入中...'}),
					autoWidth : true,
					height : 200,
					layout : 'fit',
		            id:"flashpanel",
		             border:false,
		             html:"<table width=100% height=160><tr></tr><tr><td align=center><img  src='images/loadmask.gif'/></td></tr></table>"
		        })]
	})
	document.getElementById("grid1").innerHTML = "";
	document.getElementById("grid1").align = "left";
	panel1.render("grid1");
	
	patrolMonitor.getALXBarData(function(data){//在dwr.xml有相應的配置
		var dateArr_1 = data['0'];
		var dateArr_2 = data['1'];
		var dateArr_3 = data['2'];
		
		var xml ="<anychart>" +
					"	<margin left='-10' right='-10' top='-10' bottom='-10'/>" +
					         "<settings> <animation enabled='True'/> </settings>" +
					         "<charts>" +
					         "<chart plot_type='CategorizedVertical'> "+
					         "<data_plot_settings default_series_type='Bar'>"+
							"<bar_series group_padding='0.2'>"+
								"<tooltip_settings enabled='true'>" +
								"<format>時間:{%time}點\r\n{%axisName}:{%Value}{numDecimals:0}</format>"+
								"</tooltip_settings>"+
							"</bar_series>"+
						"</data_plot_settings>"+
						
						"<chart_settings>"+
						"<title enabled='false'>"+
						"</title>"+
						"<axes>" +
						"			  	 <x_axis >" +
						"					 <title><text></text></title>" +
						"				 </x_axis>" +
						"			 <y_axis><scale minimum='0'/>" +
						"				 <title><text></text></title>" +
						"				 <labels>" +
						"                  <format>{%Value}{numDecimals:0}</format>"+
						"				 </labels>"+
						"			 </y_axis>"+
						"		 	</axes>" +
						"</chart_settings>" +
						
						"<data><series name='Series 1'>";
			for(var key in dateArr_1){
				var dataStr = dateArr_1[key];
				var time = dataStr.split('&&')[0];
				var cnt = dataStr.split('&&')[1];
				
				xml+="<point name='"+time+"' y='"+cnt+"'>" +
						"<attributes>" +
							"<attribute name='axisName'>正常數</attribute>" +
							"<attribute name='time'>"+time+"</attribute>" +
						"</attributes>" +
					 "</point>";
			}
		
			xml+="</series><series name='Series 2'>";
			for(var key in dateArr_2){
				var dataStr = dateArr_2[key];
				var time = dataStr.split('&&')[0];
				var cnt = dataStr.split('&&')[1];
			
				xml+="<point name='"+time+"' y='"+cnt+"'>" +
						"<attributes>" +
							"<attribute name='axisName'>不正常數</attribute>" +
							"<attribute name='time'>"+time+"</attribute>" +
						"</attributes>" +
					 "</point>";
			}
			xml+="</series><series name='Series 2'>";
			for(var key in dateArr_3){
				var dataStr = dateArr_3[key];
				var time = dataStr.split('&&')[0];
				var cnt = dataStr.split('&&')[1];
				
				xml+="<point name='"+time+"' y='"+cnt+"'>" +
						"<attributes>" +
							"<attribute name='axisName'>異常數</attribute>" +
							"<attribute name='time'>"+time+"</attribute>" +
						"</attributes>" +
					 "</point>";
			}
			xml+= "</series></data>"+
					"</chart>"+
				"</charts>"+
			"</anychart>"
				
			var chartSample = new AnyChart('./anyChart/AnyChart.swf');
			chartSample.width =Ext.lib.Dom.getViewWidth()*0.57;
			chartSample.height = 174;
			chartSample.setData(xml);
			chartSample.write('flashpanel');
	});

 

3、jsp頁面，要使用ext anychart等要匯入一些檔案到webroot下。

匯入的是：anyChart  ext3.0 images resources   DWRProxy.js等。在body中有 <div id ="grid1">