springboot 使用highcharts 结合ajax简单例子


<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;i0].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>

你可能感兴趣的:(highcharts)