highCharts动态取值之单折线图
来源：互联网 发布：java 变量命名规则 编辑：程序博客网 时间：2024/06/05 07:15
一般项目中做统计功能的时候会用图表的的形式展示，我在项目中绘制图表使用的是HighCharts，官网API：HighCharts中文网 ，官网上呢，关于highcharts的使用方法讲的很详细，还有案例可以看。但是，大都是些静态数据，在这里主要总结下通过ajax动态取值展示数据的案例：
假设有这样一个场景：学校一个贴吧，有一个用户表，字段如下（随便说几个）：loginTime(登录时间),userId(用户ID),outTime(退出时间)。 有这样一个需求：统计某一时间段
内用户登录（上网）数量。前台页面布局如下：
日历控件的代码就不粘贴了，用的是My97DatePicker ，需要用的可以去网上下载下js文件，然后查询下用法即可，下载链接日历控件js 然后页面上还需要提前设置好画布（其实就是折线图显示的地方），如下即可：
<div id="container" style="min-width:700px;height:400px;"></div>然后就是取值的问题了，js代码如下：
var timeArray = new Array(); var step; var chart; var series = []; var titleY = ""; $(function(){ reDrawLine(0); }); //单击事件，根据传的参数重新画图 function reDrawLine(id){ timeArray = new Array(); step = 0; series = []; getDatas(id); chart = null; drawLine(); } //获取数据 function getDatas(id){ var startTime = $("#startTime").val(); //页面上设置好的日历控件 开始时间 id为startTime var endTime = $("#endTime").val(); $.ajax({ type:'POST', url:'<%=basePath%>userlog/userlog!getOnlineNumbers.action', data:{ 'formInfo.startTime':startTime, 'formInfo.endTime':endTime }, cache : false, async : false, dataType : 'JSON', success : function(data){ var countArray = new Array(); var resultDate = data; var count = ""; if(resultDate != null){ for(var j=0;j<resultDate.length;j++){ timeArray.push(resultDate[j].clientTimeStr); countArray.push(resultDate[j].vcount); } //for series[0] = { name: nameValue, marker: { symbol: 'circle' }, data: countArray }; } //if } //function }); //ajax } //画折线图 function drawLine(){ chart = $("#container").highcharts({ title:{ text : titleX }, xAxis:{ categories : [] }, yAxis:{ title:{ text:titleY } }, plotOptions:{ series:{ cursor:'pointer', events:{ click:function(event){ }, legendItemClick:function(){ return false; } } } }, tooltip:{ crosshairs:true, shared:true }, credits:{ enabled:false //禁用版权信息 }, series:series }).highcharts(); }action中主要实现如下：public void getOnlineNumbers(){ List<UserlogInfo> list = UserlogInfoManager.getOnlineNum(formInfo); JSONArray jsonArray = new JSONArray(); jsonArray = JSONArray.fromObject(list); writeString(jsonArray.toString());} 用的ibatis Sql如下（时间进行了处理，只到年月）：select count(userId) as vcountTwo,date_format(loginTime,#dateFormat#) as clientTimeStr from ( select B.userId,date_format(B.loginTime,#dateFormat#) loginTime from m_userInfo B where B.loginTime!='' <isNotEmpty prepend="and" property="startTime"> date_format(B.loginTime,#dateFormat#) between #startTime# and #endTime# </isNotEmpty> group by date_format(B.loginTime,#dateFormat#),B.userId ) A group by loginTime主要就是这样实现的，至于dao层等的做法就不一一阐述了，解析json的java类也有些许差异，主要将sql 及页面的js记录下来，以备之需。另外说下，画图新手的问题可能主要就是不知道如何传值，关于画图其实最主要的还是sql，只要你根据业务需求将sql完成了，画图也就简单了；正好开发用到这个，就记录下来，可能自己以后会用到，同时分享给需要的童鞋，文笔不好，可能表达的不是太好，有问题可以留言，相互讨论学习下~~ 效果图如下：
0 0
- highCharts动态取值之单折线图
- highcharts折线图动态数据展示
- 利用highcharts实现实时动态折线图
- php实现动态折线图，highcharts折线图
- HighCharts之2D折线图
- highcharts绘制折线图
- HighCharts基本折线图
- highcharts之多折线图
- highcharts创建折线图
- Highcharts-多条折线图（静态、动态）
- highcharts 动态生成x轴和折线图
- highcharts实现实时动态的折线面积图
- highcharts之柱状图，折线图，饼图组合显示
- HighCharts之2D带Label的折线图
- HighCharts之2D柱状图、折线图的组合双轴图
- HighCharts之2D柱状图、折线图的组合多轴图
- Highcharts折线图折线不显示
- AChartEngine之动态折线图
- ZeroBraneStudio过滤文件类型 设置编辑器
- CodeForces 163B Lemmings 二分
- oracle学习笔记 oracle软件安装和数据库的创建
- Django Admin - 将model的Add（增加功能去掉）
- 浏览器渲染简介
- highCharts动态取值之单折线图
- ORACLE EPM 11.1.2.3 Hyperion planning Essbase 安装配置全纪录
- 算法杂货铺——分类算法之朴素贝叶斯分类(Naive Bayesian classification)
- 这次分享的是一个分布式的网络服务框架gylib
- Ubuntu 安装openssl环境
- ORACLE 返向索引 Reverse Key Indexes
- javaWeb学习记录：文件上传与下载
- CAAnimation四种动画
- 逻辑运算
