最近研究将传感器传过来的数据以实时曲线的形式显示在web前端,在网上找了又找,最终实现了基本功能,拿出来和大家分享一下~~
曲线是用Highchairs实现的,使用起来非常方便~~
web前端:
- var data;
- Highcharts.setOptions({
- global: {
- useUTC: false
- }
- });
- var chart;
- $(function() {
- chart = new Highcharts.Chart({
- chart: {
- renderTo: 'container',
- defaultSeriesType: 'spline',
- marginRight: 10,
- events: {
- load: getForm
- }
- },
- title: {
- text: '实时参数曲线'
- },
- xAxis: {
- type: 'datetime',
- tickPixelInterval: 150
- },
- yAxis: {
- title: {
- text: 'Value'
- },
- plotLines: [{
- value: 0,
- width: 1,
- color: '#808080'
- }]
- },
- tooltip: {
- formatter: function() {
- return '<b>'+ this.series.name +'</b><br/>'+
- Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
- Highcharts.numberFormat(this.y, 2);
- }
- },
- legend: {
- layout: 'vertical',
- align: 'right',
- verticalAlign: 'top',
- x: -10,
- y: 100,
- borderWidth: 0
- },
- exporting: {
- enabled: false
- },
- series: [{
- name: '参数',
- data:[]
- }]
- });
- function getForm(){
- jQuery.getJSON("find.do?command=rtView", null, function(data) { //在rtView中返回json数据
- //为曲线设置值
- chart.series[0].setData(data);
- });
- }
- $(document).ready(function() {
- //每隔1秒自动调用方法,实现图表的实时更新
- window.setInterval(getForm,1000);
- });
- });
后台:在rtView函数中
- response.setHeader("Pragma","No-Cache");
- response.setHeader("Cache-Control","No-Cache");
- response.setDateHeader("Expires", 0);
- //json
- StringBuilder rtdataBuffer=new StringBuilder();
- / ArrayList list=new ArrayList();
- SerialPortsIni spi = new SerialPortsIni(); //传感器传参数处理类,这里不做说明,就是产生数据的
- //限制每页20点数
- if(celist.size()>20){
- System.out.println(celist.size()+"sssssssss");
- celist.remove(0);
- }
- // list.add(spi.getEnvdata().getLight());
- System.out.println("$$$$$$$$$$$$$"+spi.getEnvdata().getLight());
- //拼凑json
- rtdataBuffer.append("[").append(new Date().getTime()).append(",").
- append(spi.getEnvdata().getLight()).append("]");
- celist.add(rtdataBuffer.toString());
- //传参数向前台
- response.getWriter().print(celist);