我的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 投票
