highcharts之堆栈面积（折线）图——结合后台数据

阅读更多

highcharts的堆栈面积图适用于一组对象对同一个指标在一段时间范围内进行走势的展示，同时，在每个时间点可以同时显示出每个对象在这个时间点的值，一目了然。官网上的是这样的：

 

实际情况中，需要结合后台查询出数据再填充，难点在于数据结构的拼装。而且有时候还不止一个指标，你可能被要求得出若干个指标在这组对象的这段时间的值。

 

下面，我就来模拟一种情景：

假设有app1,app2, app3三个对象，我需要得出他们在20160301, 20160302, 20160303这3个月的index1，index2，index3这3个指标值，并用趋势图的形式展示出来，首先，模拟查询出来的结果，真实的sql语句肯定是要按app和date来group by的：

 

我以index1这个指标为例，来画一个堆栈图。难点在于后台数据结构的拼装：

//先用假设据模拟
			 Map> map1 = new HashMap>();//模拟index1的map  
				Map> map2 = new HashMap>();//模拟index2的map
				Map> map3 = new HashMap>();//模拟index3的map
				
				String[] keys = {"a", "b", "c"};//模拟系统
				//模拟查询出的数据
				List> data = new ArrayList>();
				Map data1 = new HashMap();
				data1.put("app", "app1");
				data1.put("date", "20160301");
				data1.put("index1", 100);
				data1.put("index2", 0.9);
				data1.put("index3", 0.34);
				data.add(data1);
				Map data2 = new HashMap();
				data2.put("app", "app1");
				data2.put("date", "20160302");
				data2.put("index1", 110);
				data2.put("index2", 0.88);
				data2.put("index3", 0.3);
				data.add(data2);
				Map data3 = new HashMap();
				data3.put("app", "app1");
				data3.put("date", "20160303");
				data3.put("index1", 101);
				data3.put("index2", 0.9);
				data3.put("index3", 0.64);
				data.add(data3);

                Map data4 = new HashMap();
				data4.put("app", "app2");
				data4.put("date", "20160301");
				data4.put("index1", 120);
				data4.put("index2", 0.89);
				data4.put("index3", 0.94);
				data.add(data4);
				Map data5 = new HashMap();
				data5.put("app", "app2");
				data5.put("date", "20160302");
				data5.put("index1", 110);
				data5.put("index2", 0.88);
				data5.put("index3", 0.3);
				data.add(data5);
				Map data6 = new HashMap();
				data6.put("app", "app2");
				data6.put("date", "20160303");
				data6.put("index1", 201);
				data6.put("index2", 0.88);
				data6.put("index3", 0.04);
				data.add(data6);
				
				Map data7 = new HashMap();
				data7.put("app", "app3");
				data7.put("date", "20160301");
				data7.put("index1", 300);
				data7.put("index2", 0.9);
				data7.put("index3", 0.34);
				data.add(data7);
				Map data8 = new HashMap();
				data8.put("app", "app3");
				data8.put("date", "20160302");
				data8.put("index1", 310);
				data8.put("index2", 0.88);
				data8.put("index3", 0.335);
				data.add(data8);
				Map data9 = new HashMap();
				data9.put("app", "app3");
				data9.put("date", "20160303");
				data9.put("index1", 401);
				data9.put("index2", 0.3);
				data9.put("index3", 0.84);
				data.add(data9);
				
				Set times =  new HashSet();
				
				for(int i=0; i dto = data.get(i);
					String app = (String) dto.get("app");
					long index1 = Long.valueOf(dto.get("index1").toString());
					double index2 = (double) dto.get("index2");
					double index3 = (double) dto.get("index3");
					
					getMapData(map1, app + "|index1", index1);
					getMapData(map2, app + "|index2", index2);
					getMapData(map3, app + "|index3", index3);
					
					times.add((String)dto.get("date"));
				
				}
				List timess = new ArrayList(times);
				Collections.sort(timess);
				System.out.println(times);
				System.out.println(timess);
				System.out.println(map1);
				System.out.println(map2);
				System.out.println(map3);
				
				result.put("map1", map1);
				result.put("map2", map2);
				result.put("map3", map3);
				result.put("times", timess);
				
				public static void getMapData(Map> map, String key, Object data) {
                List