資料庫：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圖形預覽：