我的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'],
                        $(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 投票 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ffjiang/p/6051198.html