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">

 

转载于:https://www.cnblogs.com/kunpengit/archive/2011/12/06/2277936.html