我的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从前端渲染和页面网络传输两方面进行优化, ...
随机推荐
- iOS学习-UITextField设置placeholder的颜色
UITextField *text = [[UITextField alloc] initWithFrame:CGRectMake(, , , )]; text.borderStyle = UITex ...
- c语言之I/O函数
c语言中常用的I/O函数 最常用的字符串的标准I/O函数有getchar().putchar().gets().puts().scanf().printf().fputs().fgets().getc ...
- [UWP] 使用SemanticZoom控件
在写一个看新闻软件的时候,用到了SemanticZoom控件,遇到了一些问题,比如如何根据首字母分类,以及放大视图中有数据的和没数据的通过背景色或前景色区分,幸运的是,all solved. 先来个效 ...
- 响应式布局-Rem的用法
前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...
- UP Board 超详细开箱评测
前言 原创文章,转载引用务必注明链接. 江浙沪就是好,昨天发货今天收到.另外爱板太省了,外包装小纸箱还是6s钢化膜的重复利用. 注意:拍照自带抖动功能,画质大家凑合着看.冬日天气干燥,手触摸板子前建议 ...
- webpack踩坑之路——图片的路径与打包
转自:http://www.cnblogs.com/ghost-xyx/p/5812902.html 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不 ...
- HTML5的浏览器支持方案
现代的浏览器基本都支持 HTML5,此外还有老浏览器. 不管是旧的还是最新的,HTML5对无法识别的元素会作为内联元素自动处理. 所以,在这里教大家怎么让浏览器去处理"未知"的HT ...
- Javascript的原型链图
90%的前端或者js程序员或者老师们对Javascript懂得不比这个多 给手机看的 但是这个图里的所有褐色单向箭头链就是Javascript的原型链(颜色标注对理解js原型链很关键) 这图中的各个_ ...
- vim 标签页 tabnew 等的操作命令
对于vim这个 ide来说, 单纯的用 多子窗口 来操作, 感觉还是不够的, 还要结合标签页tab pages来,才能更好的操作. 所有关于标签 的 命令行 命令都是 以 :tab开始的, 可以用ta ...
- JQuery radio（单选按钮）操作方法汇总
这篇文章主要介绍了JQuery radio(单选按钮)操作方法汇总,本文讲解了获取选中值.设置选中值.根据Value值设置选中.删除Radio.遍历等内容,需要的朋友可以参考下 随着Jquery的 ...