//后台控制器中(SpringMVC)
@RequestMapping(value="/getAll",method=RequestMethod.POST)
@ResponseBody
public List<UserOnlineNum> getAll(HttpServletRequest request,HttpServletResponse response ) throws Exception{
UserOnlineNum onlineNum = new UserOnlineNum();
List<UserOnlineNum> list = onlineNumService.findLists(onlineNum);
JsonWriteUtil.writeJson(response, list);
return list;
} //js
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline', //图表类型 line, spline, area, areaspline, column, bar, pie , column,scatter
marginRight: 10,
events: {
load: function () {
var series = this.series[0];
var loaddata = function () {
$.ajax({
async: false,
type: "POST",
dataType: "json",
contentType: "application/json;charset=utf-8",
url: "./getAll", //读取数据
success: function (result) {
// 时间
var dates = new Array();
// 人数
var nums = new Array(); for(var i = 0;i< list.length;i++){
// 把时间添加到集合中
dates.push(list.datetime);
// 把人数添加到集合中
nums.push(list.num);
}
// 把日期和人数集合转换成JSON
var dateJson = eval("("+dates+")");
alert(dateJson)
var numJson = eval("("+nums+")");
alert(numJson)
}
});
series.addPoint([dates, nums], true, true);
};
// setInterval(loaddata, 300000);//每5分钟执行一次
}
}
},
xAxis: {
categories: dateJson,//xAxisstr为时间hh:mm
tickPixelInterval: 100
},
yAxis: {
min: 0,
title: {text: '数量(天/充值数)'} //Y轴坐标标题 labels:纵柱标尺
},
legend: { //【图例】位置样式
layout: 'horizontal', //【图例】显示的样式:水平(horizontal)/垂直(vertical)
backgroundColor: '#FFFFFF',
borderColor: '#CCC',
borderWidth: 1,
align: 'center',
verticalAlign: 'top',
enabled:true,
y: 50,
shadow: true
},
tooltip: {
//当鼠标悬置数据点时的格式化提示
formatter: function() {
return '实际在线人数:' + Highcharts.numberFormat(this.y, 1) +'人' +'<br/>当前时间点:'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x,2) +'<br/>';
}
},
credits: {
enabled: false
},
title: { text: '用户在线人数' }, //图表主标题
subtitle: {text: '(2014年9月13日)' }, //图表副标题
series : [ {
name : '盛迅达',
data : numJson
}]
});
});

Highcharts网页版的更多相关文章

  1. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  2. Rafy 框架-发布网页版用户手册

    前段时间把 Rafy 的用户手册由 CHM 格式转换为了网页格式,而且发布到了 github.io 上,即方便文档的实时更新,也方便大家查看. Rafy 用户手册网页版地址: http://zgynh ...

  3. 微信网页版APP - 网页微信客户端电脑版体验

    微信网页版很早就出来了,解决了很多人上班不能玩手机的问题.微信电脑版-网页微信客户端,直接安装在桌面的微信网页版,免去了开浏览器的麻烦.双击就启动了,和其他的应用程序一样:运行过程中可以隐藏在桌面右下 ...

  4. 微信收藏导出到PC端的方法,不要再傻傻的用网页版转换了!

    微信里面收藏了很多有意思的东西,想转到PC上保存起来,以防万一哪天链接失效了. 另外PC上面看,屏幕大一些,也爽一些. 以前的方法是需要通过网页版来传输一下,现在微信有了PC客户端,很方便,直接安装P ...

  5. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  6. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  7. 网页版电子表格控件tmlxSpreadsheet免费下载地址

    tmlxSpreadsheet 是一个由JavaScript 和 PHP 写成的电子表格控件(包含WP插件, Joomla插件等等).. 程序员可以容易的添加一个类似Excel功能的,可编辑的表格功能 ...

  8. ORACLE的安装与网页版创建表空间的简单操作以及PLsql的简单操作

    1.oracle的安装: 安装简单易学,在这里不做解释.下载看装包后耐心等待,注意安装目录不要有中文字符,尽量按照指定目录进行安装.安装完成后会占用有大约5g的内存. 如果要卸载oracle,需要用其 ...

  9. 基于HTML5的捕鱼达人游戏网页版

    之前给大家分享了html5实现的水果忍者,愤怒的小鸟,中国象棋游戏.今天给大家分享一款捕鱼达人(fishjoy)网页版游戏的源码.可以在线玩也可以下载到本地.它使用html5技术和javascript ...

随机推荐

  1. Ext ComboBox 动态查询

    Ext中的combobox有属性typeAhead:true 可以实现模糊匹配,但是是从开始匹配的,如果需要自定的的匹配,则需要监听beforequery方法,实现自己的匹配查询方法: var gfx ...

  2. 【elasticsearceh】elasticsearch.yml配置文件详解

    主要内容如下: cluster.name: elasticsearch 配置es的集群名称,默认是elasticsearch,es会自动发现在同一网段下的es,如果在同一网段下有多个集群,就可以用这个 ...

  3. Java Web开发基础(2)-JSP

    上一篇博我粗略的介绍了一下Servlet.粗略是由于博主也刚刚学习这部分的内容,还不是非常懂所以无法讲的非常精细.可是本着二八原则,我还是先继续学习.所以,这篇博客接着JSP的内容.由于.这两个内容关 ...

  4. Java7语法新特性

    Java7语法新特性: 1. switch中增加对String类型的支持. public String generate(String name, String gender) { String ti ...

  5. FizzBuzzWhizz问题python解法

    FizzBuzzWhizz 你是一名体育老师,在某次课距离下课还有五分钟时,你决定搞一个游戏.此时有100名学生在上课.游戏的规则是: 1. 你首先说出三个不同的特殊数,要求必须是个位数,比方3.5. ...

  6. Java – Top 5 Exception Handling Coding Practices to Avoid

    This article represents top 5 coding practices related with Java exception handling that you may wan ...

  7. Objective-C:异常的处理

    // // main.m // 03-动态绑定 // // Created by mac on 15/8/11. // Copyright (c) 2015年. All rights reserved ...

  8. 我所遭遇过的中间件--3D MAX SDK

    搞图形的人都知道3D MAX,而3D MAX SDK就是在该软件基础上的一套软件开发包.至于该不该将3D MAX SDK归纳为中间件,不要在意这细节了,反正我觉得SDK和中间件就差不多是一个东西.实际 ...

  9. 织梦(Dedecms) V5.6 plus/carbuyaction.php 本地文件包含漏洞

    漏洞版本: DedeCmsV5.6 漏洞描述: DedeCMS内容管理系统软件采用XML名字空间风格核心模板:模板全部使用文件形式保存,对用户设计模板.网站升级转移均提供很大的便利,健壮的模板标签为站 ...

  10. 解决IP地址冲突

    1.重新启动路由器就可以. 要是网络上的每一个设备都被分配了动态IP地址,路由器重新启动.又一次分配IP地址给网络上的每一个设备后,这个问题就有望得到解决. 可是假设是在企业内就不可能随便的重新启动公 ...