我的Hcharts的页面应用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title></title>
<link type="image/x-icon" href="/common/images/favicon.ico" rel="icon">
<style type="text/css">
*{padding:0;margin:0}
html,body{height:100%;width:100%;font-family:'Microsoft YaHei'}
.vote-mrg-box{position: absolute;top:0;z-index: 15;background:#fff;right:0;width:138px;padding:30px;border-radius:8px;}
.vote-mrg-box p{color:#3d3d3d;text-align:center;font-size:14px;font-weight:800;line-height:28px}
.tc{text-align:center}
.time{color:red;font-size:20px;line-height:28px;vertical-align: bottom;font-weight:800}
.miao{font-size:12px;color:#3d3d3d;line-height:28px;vertical-align: bottom;font-weight:800}
#pastTime{font-size:14px;line-height:28px;text-align:center}
.group{width:100px;font-size:12px;margin-left:19px;margin-bottom:10px;margin-top:5px;border:1px solid #2ea8e0;line-height:26px;height:26px;}
.start{border:0;line-height:26px;background:#2ea8e0;color:#fff;margin-left:19px;border-radius:4px;height:26px;width:100px;text-align:center;font-weight:normal;font-family:'Microsoft YaHei';}
</style>
</head>
<body>
<div class="vote-mrg-box">
<input type="hidden" value="${vote_time?c}" id="daojishi"/>
<p>投票倒计时:</p>
<div class="tc">
<span class="time" color="red">${vote_time?c}</span>
<span class="miao">s</span>
</div>
<p>投票经过时间:</p>
<div class="tc">
<span id="pastTime">${vote_past_time?c}</span>
<span class="miao">s</span>
</div>
<select class="group" data-conf_id="${conf_id?c}">
<option value="0">所有人</option>
<#list group_list as group>
<option value="${group.conf_group_id?c}">${group.conf_group_name}</option>
</#list>
</select>
<button class="start">开始投票</button>
</div> <div id="my_container"></div> <script src="/libs/jquery-1.8.2/jquery-1.8.2.min.js"></script>
<script src="/libs/jquery-ui-10/ui/jquery.ui.core.js"></script>
<script src="/libs/jquery-ui-10/ui/jquery.ui.widget.js"></script>
<script src="/libs/jquery-ui-10/ui/jquery.ui.mouse.js"></script>
<script src="/libs/jquery-ui-10/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="/libs/highcharts/js/highcharts.js"></script>
<script src="/libs/highcharts/js/modules/data.js"></script>
<script src="/libs/highcharts/js/modules/drilldown.js"></script>
<script> var vote_id = '${vote_id?c}', vote_code='${vote_code}';
var timeOut;//每个1秒请求一次的函数
var timeOver;//每隔5秒请求投票数据的函数
var vote_end = false;//是否投票结束的变量
var vote_start = true; function getCookie(c_name){
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
} $(function() { if(window.localStorage){
init();
}else{
alert("本浏览器不支持投票预览功能，建议更换成谷歌浏览器");
} init(); $('.vote-mrg-box').draggable({scroll:false});
$('.start').on('click', function(){
$(this).off('click');
if(vote_end){
alert('对不起投票已经结束了');
}else{
$.ajax({
url : '/scene/screen/vote/' + vote_id,
type : 'POST',
dataType : 'json',
cache:false,
data : {"vote_code" : vote_code,"conf_id" : $('.group').data('conf_id'), "conf_group_id" : $('.group').val()}
}).done(function(json) {
timeOut = setInterval(startTime, 1000);
timeOver =setInterval(redraw, 4000);
});
}
})
}); function startTime(){
var timeBox = $('.time');
var time = timeBox.html();
var nowTime;
if(time-1<0){
nowTime = 0;
}else{
nowTime = time - 1 ; if(parseInt($('#pastTime').html())< parseInt($('#daojishi').val())){
$('#pastTime').html(parseInt($('#pastTime').html())+1);
}
}
if(time == timeBox.attr('value')){
timeBox.attr('value', '')
}else{
timeBox.html(nowTime);
}
if(nowTime=='0'){
window.clearInterval(timeOut);
}
} function redraw() {
$.ajax({
url : '/scene/screen/vote/' + vote_id,
type : 'get',
dataType : 'json',
data : {
dt : 'json'
},
cache:false
}).done(function(json) {
if(json.RS_CODE != '0'){
alert(json.RS_MSG);
return;
}
var stop = $('.time').html()==0; if(stop){
window.clearInterval(timeOver);
}
chart.series[0].setData(formatSeriesData(json),stop);
chart.redraw();
}).fail(function(){
alert('请求投票数据失败,建议配置谷歌浏览器。');
})
} /**整理数据格式
*[{
* name: "赞成", //下面的类目名
* y: 56, //票数
* drilldown: "赞成" //上面的名字
*}] 如此塞入series中的data属性
*
**/
function formatSeriesData(json,end,first){
var seriesData = [];
var RS_DATA = json.RS_DATA;
var len = RS_DATA.vote_name.length||0; //最后一秒回归最大数据
for(var i=0;i<len;i++){
var y = 0; //如果此次投票结束了
if(vote_end){
//如果Y有最大值的话，就取最大值，无的话自身的数字
y = RS_DATA.vote_limit_num[i] ? RS_DATA.vote_limit_num[i]:RS_DATA.vote_data[i];
}else{
//从0开始投票 //凡有上限一定是造假的 有限制值时候
if(RS_DATA.vote_limit_num[i]){
//如果投票开始了
if(RS_DATA.vote_start){ var daojishi = parseInt($('#daojishi').val());
var pastTime = parseInt($('#pastTime').html()); //console.log(daojishi);
//console.log(pastTime);
//console.log('1',pastTime/daojishi); //投票时间初期 真实数据 1/2
if(pastTime/daojishi<0.5){
//不超过最大值
y =(RS_DATA.vote_data[i]>RS_DATA.vote_limit_num[i])?(RS_DATA.vote_limit_num[i]-1):RS_DATA.vote_data[i]; } //投票时间中旬 0.5~最后一秒前，投票猛增
if(pastTime/daojishi>0.5 && pastTime/daojishi<1 && pastTime!=daojishi){ var avg = parseInt(RS_DATA.vote_limit_num[i]/daojishi*pastTime); //如果实际投票数 大于了 当前的投票数，那么现实实际投票数
if(window.localStorage['avote'+ vote_id +i] >= avg){
y = window.localStorage['avote'+ vote_id +i]; }else{
y = avg;
}
} if(pastTime/daojishi>=1){
y = window.localStorage['avote'+ vote_id +i] || RS_DATA.vote_limit_num[i];
} window.localStorage['avote'+ vote_id +i] = y; if($('.time').html()==0){
y = RS_DATA.vote_limit_num[i];
}
} }else{
y = RS_DATA.vote_data[i];
}
}
seriesData.push({
name: RS_DATA.vote_name[i],
//如果最后值存在的话，就显示最大值，否则的话
y:y,
drilldown: RS_DATA.vote_name[i]
});
}
return seriesData;
} function init() {
$.ajax({
url : '/scene/screen/vote/' + vote_id,
type : 'get',
dataType : 'json',
data : {
dt : 'json'
},
cache:false
}).done(function(json) {
//console.log('json',json);
//判断投票是否结束了
vote_end = json.RS_DATA.vote_end;
var seriesData = formatSeriesData(json,false,1); //配置chart参数
chart = new Highcharts.Chart({
chart:{
renderTo: 'my_container',
type : 'column',
height:$(window).height(),
backgroundColor:'#000',
borderColor: '#000000',
borderWidth: 0,
className: 'dark-container',
plotBackgroundColor: 'rgba(255, 255, 255, .1)',
plotBorderColor: '#ccc',
plotBorderWidth: 1
},
//柱条选择栏颜色
colors: ['#50d88d', '#e47473', '#d8d8d8', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
width:$(window).width(),
title : {
text : '${vote_title}',
style:{
fontWeight:'bold',
fontSize:'26px',
fontFamily:'微软雅黑',
color:'#fff'
}
},
xAxis : {
categories : json.RS_DATA.vote_name
},
yAxis: {
title: {
text: '投票数',
color:'#fff'
},
gridLineWidth: 0,
lineColor: '#fff',
lineWidth: 1,
tickColor: '#fff',
labels:{style:{color:"#fff",cursor:"default",fontSize:"12px"}}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
tooltip : {
headerFormat: '<span style="font-size:11px">投票结果</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> 票<br/>'
},
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontSize:'22px',
color:'#fff'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontSize:'22px',
color:'#fff'
}
},
credits : {
enabled : false
},
series : [ {
name : '投票数',
data : seriesData,
showInLegend: false,
colorByPoint: true,
dataLabels : {
enabled : true,
rotation : 0,
color : '#FFFFFF',
align : 'center',
x : 4,
y : 10,
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif',
textShadow : '0 0 3px black'
}
}
}]
}
);
});
} Date.prototype.format = function(format) {
var o = {
"M+" : this.getMonth() + 1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth() + 3) / 3), //quarter
"S" : this.getMilliseconds()
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "")
.substr(4 - RegExp.$1.length));
}
for ( var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] : ("00" + o[k])
.substr(("" + o[k]).length));
}
}
return format;
} </script>
</body>
</html>
HTML 投票
我的Hcharts的页面应用的更多相关文章
- 把页面上的图表导出为pdf文件，分享一种请求下载文件的方法
最近客户提出一个需求,就是把页面上的图表导出为pdf文件. 找了很多资料.终于有了点头绪.最主要是参考了HighCharts的做法.http://www.hcharts.cn/ 实现原理:把页面图表的 ...
- hcharts中文网 一个js图表库
http://www.bossidc.com/info/gongju/2013/0717/2133.html hcharts源码包下载 http://www.hcharts.cn/demo/hig ...
- 在OAF页面中集成ECharts以及highcharts用于显示图表
历史博文中有讲解在请求中输出基础图表的方式,见地址:EBS 请求输出Html报表集成Echarts 本文讲述在OAF中集成这两类图表. 集成的基本思路:在OAF页面中加入一个rawText组件,在ra ...
- hcharts生成图表
借助hcharts插件,可以很方便地在模板页面中生成图表.类似插件还有echarts. 补充...
- 页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
- ASP.NET Core应用的错误处理[3]：ExceptionHandlerMiddleware中间件如何呈现“定制化错误页面”
DeveloperExceptionPageMiddleware中间件利用呈现出来的错误页面实现抛出异常和当前请求的详细信息以辅助开发人员更好地进行纠错诊断工作,而ExceptionHandlerMi ...
- nodejs进阶(4)—读取图片到页面
我们先实现从指定路径读取图片然后输出到页面的功能. 先准备一张图片imgs/dog.jpg. file.js里面继续添加readImg方法,在这里注意读写的时候都需要声明'binary'.(file. ...
- ASP.NET Core应用的错误处理[2]：DeveloperExceptionPageMiddleware中间件如何呈现“开发者异常页面”
在<ASP.NET Core应用的错误处理[1]:三种呈现错误页面的方式>中,我们通过几个简单的实例演示了如何呈现一个错误页面,这些错误页面的呈现分别由三个对应的中间件来完成,接下来我们将 ...
- 百度MIP移动页面加速——不只是CDN
MIP是用CDN做加速的么?准确答案是:是,但不只是. MIP全称Mobile Instant Pages,移动网页加速器,是百度提出的页面加速解决方案.MIP从前端渲染和页面网络传输两方面进行优化, ...
随机推荐
- Stream与byte[]与Image与string
public byte[] GetByteImage(Image img) { byte[] bt = null; if (!img.Equals(null)) { using (MemoryStre ...
- 前端必备的js知识点（转载）
1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.2.js是一门什么样的语言及特点? ...
- AngularJS模型
1. AngularJS模型主要就是使用的AngularJS的ng-model指令. ng-model指令可以将输入域的值与 AngularJS 创建的变量绑定. <!DOCTYPE html& ...
- Python学习--Python简介
Python 简介 Python是一种解释型.编译性.面向对象.动态数据类型的高级程序设计语言.Python由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年. P ...
- git常用命令
开始的时候 git config --global user.name "Your Name" git config --global user.email "email ...
- bzoj4196
4196: [Noi2015]软件包管理器 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 1376 Solved: 785[Submit][Stat ...
- UVa11427 Expect the Expected
数学期望 概率递推 每一天的概率都是独立且相同的.可以先推出每天打i盘赢j盘的概率f[i][j] f[i][j]=f[i-1][j]*(1-p) + f[i-1][j-1]*p 输 赢 设此人打一天胜 ...
- 设置session，cookies
Cookie cookie = new Cookie("username",username); cookie.setMaxAge(60 * 60 * 24 * 365 * 2); ...
- PHP判断SESSION过期的方法
在公共函数function.php中添加如下方法,即可控制用户登录的SESSION有效期 //封装SESSION过期判断方法function start_session($expire = 0){ $ ...
- [Android]学习笔记之布局
5大布局,其中前3个是常用的,第四个绝对布局已经提示deprecated ![](http://images2015.cnblogs.com/blog/194303/201611/194303-201 ...