Highcharts JQuery 实时监控刷新图表(柱状图)



          第一次发的是折线图,现在做了一个柱状图,代码基本上差不多,下面是前台代码,后台代码参考折线图文章:

<%@ 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>Highcharts Example</title>
  <script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">
   $(function () {
    Highcharts.setOptions({
             global: {
                 useUTC: false
             }
          });
       var chart;
       $(document).ready(function() {
           var options = {
               chart: {
                   renderTo: 'container',
                   type: 'column',
               },
               title: {
                   text: '10000号实时监控系统'
               },
               subtitle: {
                   text: '话务预测分析'
               },
              xAxis: {
                   categories: [
                       'Jan',
                       'Feb',
                       'Mar',
                       'Apr',
                       'May',
                       'Jun',
                       'Jul',
                       'Aug',
                       'Sep',
                       'Oct',
                       'Nov',
                       'Dec'
                   ]
               },
               yAxis: {
                   min: 0,
                   title: {
                       text: '数值'
                   }
               },
               legend: {
                   layout: 'vertical',
                   backgroundColor: '#FFFFFF',
                   align: 'left',
                   verticalAlign: 'top',
                   x: 50,
                   y: 20,
                   floating: true,
                   shadow: true
               },
               tooltip: {
                   formatter: function() {
                       return '技能组:'+
                           this.x +'</br>值:'+ this.y +' 个';
                   }
               },
               credits: {
       enabled: false
      },
               plotOptions: {
                  column: {
                       pointPadding: 0.2,
                       borderWidth: 0
                  }
               },
                series: [{
                   name: '排班量'
               }, {
                   name: '话务量'
               }, {
                name: '接通量'
               }]
           };
          
           var url = "<%=basePath%>/singins.do?method=getDataToColumnJson";
       $.ajax({
            url: url,
            type: "post",
            cache: false,
            dataType: "json",
            data: {},
            ifModified: false,
            success: function(result){
                   var paiBan = [];
                   var huaWu = [];
                   var jieTong = [];
          jQuery.each(result, function(m, obj) {
           paiBan.push(
                              parseInt(obj.value0)
                          );
                          huaWu.push(
                              parseInt(obj.value1)
                          );
                          jieTong.push(
                              parseInt(obj.value2)
                          );
                   });
                     options.series[0].data = paiBan;
                options.series[1].data = huaWu;
                options.series[2].data = jieTong;
                chart = new Highcharts.Chart(options);
           }
        });
       });
   });
   window.returnValue='true';
  </script>
 </head>
 <body>
  <script src="<%=path%>/js/highcharts.js"></script>
  <script src="<%=path%>/js/modules/exporting.js"></script>
  <div id="container"
   style="min-width: 400px; height: 400px; margin: 0 auto"></div>
 </body>
</html>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值