springMVC jqPlot ajax数据交互
数据库:mongoDB框架:springMVC, Spring Data
Web前端:JQuery, JQuery EasyUI, jqPlot
jqPlot代码:
$(function() {var tab = $('#index_tabs div.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 = [[,,,,,]];}});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}});});
后台代码:
@Controllerpublic class WellDataController {@Autowiredprivate WellDataService wellDataService;private static final Logger log = Logger.getLogger(WellDataService.class);/** * 获得实时示功图曲线数据 * @param wellNum * @return */@RequestMapping("/getSGTPlotData.html")@ResponseBodypublic 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图形预览:
http://dl.iteye.com/upload/attachment/0068/3126/61666006-b3c7-3b87-bd04-c30b343e838c.jpg
页:
[1]