数据库:mongoDB
框架:springMVC, Spring Data
Web前端:JQuery, JQuery EasyUI, jqPlot
jqPlot代码:
$(function() {
var tab = $('#index_tabs div[name=realtime_sgt].easyui-tabs').tabs(
'getSelected');
var id = tab.panel('options').title;
$('<div style="height:300px;width:500px" id='+id+'></div>').appendTo(
tab);
var wellNum = id.substring(0, id.length - 3);
var ajaxDataRenderer = function(url, plot, options) {
var ret = null;
$.ajax({
async : false,
url : url,
type : 'post',
cache : true,
dataType : 'json',
data : 'wellNum=' + wellNum,
success : function(data) {
ret = data.data;
//ret = [[[1,1],[3,4],[2,1],[5,6],[2,0],[2,6]]];
}
});
return ret;
};
var jsonurl = 'getSGTPlotData.html';
var plot = $.jqplot(id, jsonurl, {
title : id,
dataRenderer : ajaxDataRenderer,
dataRendererOptions : {
unusedOptionalUrl : jsonurl
},
seriesDefaults: {
showLine: true,
rendererOptions: {
smooth: true
}
},
sortData:false,
axes : {
xaxis : {
label : "位移(米)",
labelRenderer : $.jqplot.CanvasAxisLabelRenderer
},
yaxis : {
label : "载荷(千牛)",
labelRenderer : $.jqplot.CanvasAxisLabelRenderer
}
},
highlighter : {
show : true
},
cursor : {
show : true,
zoom : true
}
});
});
后台代码:
@Controller
public class WellDataController {
@Autowired
private WellDataService wellDataService;
private static final Logger log = Logger.getLogger(WellDataService.class);
/**
* 获得实时示功图曲线数据
* @param wellNum
* @return
*/
@RequestMapping("/getSGTPlotData.html")
@ResponseBody
public Map<String, Object> getSGTPlotData(@RequestParam(value="wellNum", required=true)String wellNum) {
WellData wellData = wellDataService.getLatestWellDataByWellNum(wellNum);
JSONArray jsonArrayResult = new JSONArray(); //最终的数组
JSONArray jsonArray = new JSONArray();
LvBo.lvBo(wellData.getWeiyi(), wellData.getZaihe());
JSONArray weiyi = JSONArray.fromObject(wellData.getWeiyi());
JSONArray zaihe = JSONArray.fromObject(wellData.getZaihe());
log.debug(weiyi.size());
for(int i=0;i<weiyi.size();i++) {
JSONArray json = new JSONArray();
json.add(weiyi.get(i));
json.add(zaihe.get(i));
jsonArray.add(json);
}
jsonArrayResult.add(jsonArray);
Map<String, Object> map = new HashMap<String, Object>();
map.put("data", jsonArrayResult);
return map;
}
}
springMVC JSON转换器:
<bean class ="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" >
<property name="messageConverters">
<list>
<ref bean="mappingJacksonHttpMessageConverter" /><!-- json转换器 -->
</list>
</property>
</bean>
<bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />
jqplot图形预览: