Highcharts JQuery 实时监控刷新图表 -

jucks2611

浏览: 99132 次
性别:
来自: 上海

最近访客更多访客>>

aaa90azhou

lzylin

xx5333

seavers

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Highcharts JQuery 实时监控刷新图表

博客分类：

web java Highcharts JQuery

现手上有个项目，要做一个实时监控刷新图表(折线图)，网上资料大多是直接从官网上下载的例子，实时从后台取数据到前台展示的资料不多，现把最近几天研究的Demo分享一下：

1. Jsp： liveTest.jsp

代码如下：

  <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>折线图</title>
  <script type="text/javascript"
   src="<%= path%>/script/utils/jquery.min.js"></script>
  <script type="text/javascript">

    //很多参数不懂,看api去吧
  $(function () {
   Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
      var chart;
      $(document).ready(function() {

          var options = {
              chart: {
                  renderTo: 'container',
                  type: 'spline',
                  marginRight: 10,
                  events: {
                      load: function() {
                          var series = this.series;
                          setInterval(function() {

                          var url = "<%=basePath%>/singins.do?method=getDataToJsonNew"; // 实时获取最新数据
           $.ajax({
                url: url,
                type: "post",
                cache: false,
                dataType: "json",
                data: {},
                ifModified: false,
                success: function(result){
              jQuery.each(result, function(m, obj) {
               var x = (new Date()).getTime();
               var y0 = obj.value0;
               var y1 = obj.value1;
               var y2 = obj.value2;
               series[0].addPoint([x, parseInt(y0)], true, true);
               series[1].addPoint([x, parseInt(y1)], true, true);
               series[2].addPoint([x, parseInt(y2)], true, true); //第三个参数为true，才能实时重画图表
                       });
              }
            });
                          }, 15000);
                      }
                  }
              },
              title: {
                  text: '10000号实时监控系统'
              },
              subtitle: {
                  text: '排班量，话务量'
              },
              xAxis: {
                  type: 'datetime',
                  tickPixelInterval: 100,
              },
              yAxis: {
                  title: {
                      text: 'Value'
                  },
                  startOnTick: true, //为true时，设置min才有效
                  min: 0,
                  //minorTickInterval: 'auto',// y轴样式网格的形式
                  plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'
                  }]
              },
              legend: {
                  align: 'left',
                  verticalAlign: 'top',
                  y: 20,
                  floating: true,
                  borderWidth: 0
              },
              tooltip: {
              crosshairs: true,
                  formatter: function() {
                         return '<b>'+ this.series.name +'</b><br/>值：'+
                         Highcharts.numberFormat(this.y, 2) +'<br/>时间：'+
                         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x);
                  }
              },
              credits: {
      enabled: false
     },
              plotOptions: {
                  series: {
                      cursor: 'pointer',
                      point: {
                          events: {
                              click: function() {
                                  hs.htmlExpand(null, {
                                      pageOrigin: {
                                          x: this.pageX,
                                          y: this.pageY
                                      },
                                      headingText: this.series.name,
                                      maincontentText: '值：' + this.y +':<br/>时间：'+
                                          Highcharts.dateFormat('%Y-%m-%e %H:%M:%S', this.x),
                                      width: 200
                                  });
                              }
                          }
                      },
                      marker: {
                          lineWidth: 1
                      }
                  }
              },
              series: [{
                  name: '排班量'
              }, {
                  name: '话务量'
              }, {
              name: '接通量'
              }]
          };

         var url = "<%=basePath%>/singins.do?method=getDataToJson";
      $.ajax({
           url: url,
           type: "post",
           cache: false,
           dataType: "json",
           data: {},
           ifModified: false,
           success: function(result){
                  var paiBan = [];
                  var huaWu = [];
                  var jieTong = [];
                        var time = (new Date()).getTime();
         jQuery.each(result, function(m, obj) {
                      paiBan.push([
                            time + (m -19) * 15000,
                            parseInt(obj.value0)   //此处相当重要,就是这里,让我纠结了N小时,直接obj.value是不行的,不知道为什么
                         ]);
                        huaWu.push([
                            time + (m -19) * 15000,
                            parseInt(obj.value1) //此处相当重要,就是这里,让我纠结了N小时,直接obj.value是不行的,不知道为什么
                         ]);
                        jieTong.push([
                            time + (m -19) * 15000,
                            parseInt(obj.value2)     //此处相当重要,就是这里,让我纠结了N小时,直接obj.value是不行的,不知道为什么
                         ]);
                  });
               options.series[0].data = paiBan;
               options.series[1].data = huaWu;
               options.series[2].data = jieTong;
               chart = new Highcharts.Chart(options);
         }
       });
      });
  });
</script>
</head>
<body>
  <script src="<%= path%>/js/highcharts.js"></script>
  <script src="<%= path%>/js/modules/exporting.js"></script>
  <script type="text/javascript"
   src=">
  <script type="text/javascript"
   src="http://www.highcharts.com/highslide/highslide.config.js"
   charset="utf-8"></script>
  <link rel="stylesheet" type="text/css"
   href="http://www.highcharts.com/highslide/highslide.css" />
  <div id="container"
   style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

2.后台相关代码：

    /**
*
* @Title getDataToJson
* @Description 把后台数据转换为JSON
* @param mapping
* @param form
* @param request
* @param response
* @return
* @date Aug 8, 2012
*/
@SuppressWarnings("unchecked")
public ActionForward getDataToJson(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) {
  try {
   List list90 = singinService.getSinginList(null);
   List<TestBean> list = new ArrayList<TestBean>(); //模拟数据

   for (int i = -19; i <= 0; i++) {
    TestBean tb = new TestBean();
    Random random = new Random();
    String value0 = String.valueOf(random.nextInt(10));
    String value1 = String.valueOf(random.nextInt(10));
    String value2 = String.valueOf(random.nextInt(10));
    tb.setValue0(value0);
    tb.setValue1(value1);
    tb.setValue2(value2);
    list.add(tb);
   }

   JSONArray jsonArray = JSONArray.fromObject(list); //封装成Json
   response.setHeader("Cache-Control", "no-cache");
   response.setContentType("text/json;charset=UTF-8");
   PrintWriter out = response.getWriter();
   out.print(jsonArray);
  } catch (Exception e) {
   e.printStackTrace();
  }
  return null;
}

/**
*
* @Title getDataToJsonNew
* @Description 最新时间点数据
* @param mapping
* @param form
* @param request
* @param response
* @return
* @date Aug 10, 2012
*/
public ActionForward getDataToJsonNew(ActionMapping mapping,
   ActionForm form, HttpServletRequest request,
   HttpServletResponse response) {
  try {
   List<TestBean> list = new ArrayList<TestBean>();
   TestBean tb = new TestBean();
   Random random = new Random();
   String value0 = String.valueOf(random.nextInt(10));
   String value1 = String.valueOf(random.nextInt(10));
   String value2 = String.valueOf(random.nextInt(10));
   tb.setValue0(value0);
   tb.setValue1(value1);
   tb.setValue2(value2);
   list.add(tb);

JSONArray jsonArray = JSONArray.fromObject(list); //封装成Json

   response.setHeader("Cache-Control", "no-cache");
   response.setContentType("text/json;charset=UTF-8");
   PrintWriter out = response.getWriter();
   out.print(jsonArray);
  } catch (Exception e) {
   e.printStackTrace();
  }
  return null;
}

3.有图有真相