springboot 使用highcharts 结合ajax简单例子 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>数据统计</title>
    <script type="text/javascript" src="/Highcharts-6.0.4/code/highcharts.js"></script>
    <script type="text/javascript" src="/Highcharts-6.0.4/code/highcharts-3d.src.js"></script>
    <script type="text/javascript" src="/Highcharts-6.0.4/code/modules/exporting.js"></script>

    <script type="text/javascript" src="/js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="/js/china.js"></script>
</head>

<body onload="startime()" background="/images/datebook.jpg">
    <div align="center" style="height:50px;border: 0px;">
        <div id="div" style="border: 0px; display:inline; color:#112200;"></div>
    </div>
    <script>
            function startime(){
                var t=new Date();//创建一个date的对象，才可以引用相关的date
                var year=t.getFullYear();
                var mon=t.getMonth()+1;
                var day=t.getDate();
                var h=t.getHours();
                var m=t.getMinutes();
                var s=t.getSeconds();
                var ms=t.getMilliseconds();
                mon=checktime(mon);
                day=checktime(day);
                m=checktime(m);
                s=checktime(s);
                document.getElementById("div").innerHTML='公元 '+year+'-'+mon+'-'+day+'  '+h+':'+m+':'+s;
                t=setTimeout("startime()",100 );//注意一下函数的的参数的使用，第一个参数是要加上引号的，这里呢重新调用了原来的函数，实现了刷新的功能
                //第二个参数是表示刷新的时间，500表示的是0.5秒
            }
            function checktime(i) {//这里只是为了美观一点  ，在个位数的面前，将数字的显示+一个0
                if(i<10)
                {
                    i="0"+i;
                }
                return i;
            }
    </script>
    <#-- <div align="left">
        <div id="bing" style="width: 50%;height:400px;display: inline-block;"></div>
    </div>-->
    <div align="center">
        <div id="china" style="width: 80%;height:500px;display: inline-block;" ></div>
    </div>
    <div align="center">
        <div id="line" style="width: 50%;height:400px;display: inline-block;" ></div>
        <div id="pie" style="width: 50%;height:400px;display: inline-block;"></div>
    </div>
    <script type="text/javascript">
        $(function(){
            var xtext = [];//X轴TEXT
            var nums = [];//y轴数量
            $.ajax({
                url:'/userLog/loginCnt',//请求数据的地址
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                data : {},
                dataType : "json",        //返回数据形式为json
                success:function(result){
                    for(var i=0;i<result.length;i++){
                        xtext.push(result[i].userId);
                        nums.push(result[i].countNum);
                    }
                    chart.series[0].setData(nums);
                },
                error:function(e){
                }
            });
            var chart = new Highcharts.Chart({
                chart:{
                    renderTo:'china',//div的id值
                    type:'column' //显示类型 柱形
                },
                title:{
                    text:'今日登录用户次数' //图表的标题
                },
                xAxis:{
                    categories:xtext
                },
                yAxis:{
                    title:{
                        text:'数量' //Y轴的名称
                    },
                },
                series:[{
                    name:"数量"
                }],
                credits: {//去掉版权
                    enabled: false
                }
            });
        });
    </script>
</body>
</html>
posted @ 2018-01-05 11:18  qwer78  阅读(37)  评论(0)    收藏  举报