我的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从前端渲染和页面网络传输两方面进行优化, ...
随机推荐
- 【Git】error: RPC
摘要 git push throws error: RPC failed; result=56, HTTP code = 200的解决办法 原因 默认 Git 设置 http post 的缓存为 ...
- jq.validate 自定义验证两个日期
jq.validate 自定义验证两个日期 首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...
- Fiddler抓包工具使用基础
官网下载Fiddler Fiddler的官方网站: www.fiddler2.com Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监 ...
- Android开发工具: AS, Gradle, Git等
(一)史上最详细的Android Studio系列教程 你还没有使用Android Studio + Gradle么?那就有点太落伍了,下面自己原创总结了Android Studio的一系列教程,图文 ...
- linux文件文件夹递归监控
引言 今年(2016)年初来到A公司了,刚入职的时候比较缺前端fe,就过来顶了三个月,这段时间学到了好多前端开发的知识,这些都是题外话了.期间接触了一个很好用的前端自动化部署工具 -- fis,其中有 ...
- MYSQL远程登录权限设置 ，可以让Navicat远程连接服务器的数据库
Mysql默认关闭远程登录权限,如下操作允许用户在任意地点登录: 1. 进入mysql,GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY ...
- myql Connect
mysql折腾笔记 2014-01-05 10:58 经常吹嘘自己玩过各种数据库. redis, mysql, sqlite, mongodb..常用数据库都不在话下,不料今天却在远程连接mysql上 ...
- 不要遍历dom
function selectProvince() { $.ajax( { type: "post", url: "/province/getStrType", ...
- logstash-5.0同步mysql
环境 Windows10企业版X64 安装logstash-input-jdbc插件 进入logstash/bin/目录,命令: logstash-plugin install logstash-in ...
- 5种 JavaScript 调用函数的方法
一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性 ...