highcharts-ajax-tp5 controller

controller

查询数据并使用json_encode()返回值

 public function getdata()
    {
       $data = Db::query("xxxxx");
        return json_encode($data);
    }

ajax 调取并添加到图表中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>首页</title>
    <!-- Bootstrap core CSS -->
    <link href="http://localhost/attence/public/static/admin/css/bootstrap.css" rel="stylesheet">
     <link href="http://localhost/attence/public/static/admin/css/admin.css" rel="stylesheet">

    <link rel="stylesheet" href="http://localhost/attence/public/static/admin/font-awesome/css/font-awesome.min.css">
    <!-- Page Specific CSS -->
    <link rel="stylesheet" href="http://localhost/attence/public/static/admin/css/morris-0.4.3.min.css">
    <link rel="stylesheet" href="http://localhost/attence/public/static/admin/css/custom.css"> 
    <script src="http://localhost/attence/public/static/admin/js/jquery-1.10.2.js"></script>
    <script src="http://localhost/attence/public/static/admin/js/bootstrap.js"></script>
     <script src="http://localhost/attence/public/static/admin/js/highcharts.js"></script>
    <script src="http://localhost/attence/public/static/admin/js/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> 
    <script src="http://localhost/attence/public/static/admin/js/variable-pie.js"></script>    
    <script src="http://localhost/attence/public/static/admin/js/export-data.js"></script>
    <script src="http://localhost/attence/public/static/admin/js/accessibility.js"></script>
    <script src="http://localhost/attence/public/static/admin/js/pattern-fill.js"></script>
    <style>
        input[type=radio]:nth-of-type(1){
        margin-left: 180px;
        }
        .sure{
        text-decoration: none; 
        display: inline-block;
        background: #fff;
        color: #3149e4;
        padding:3px 8px;
        border:2px solid #3149e4;
        border-radius: 4px;
        margin-left: 10px;
        text-align: center;                 
        }
        .sure:hover{
            background: #3149e4;
            color:#fff;
        }
    </style>
  </head>

  <body>
    {include file="common:header" /}
    {include file="common:menu" /}
    <div id="wrapper">   
      <div id="page-wrapper" style="padding-top: 60px">
    <div class="row">       
        <div class="col-lg-12">
            <h4 style="font-weight: normal;padding-left: 850px;">班级缺勤对比</h4>
                {volist name="res" id="vo"}
                <input type="radio" name="academy" value="{$vo['academy']}">{$vo['academy']}
                {/volist}
                <button class="sure" onclick="getclassattence()">确定</button>
                <div id="container" style="width:400px;height:4000px;"> </div>
            </form>     
        </div>       
    </div>
    </div>
    </div>
  </body>
  <script>
   
    $(document).ready(function() {      
        
    var academy = "数信";
 
    var chart = {
    chart: {
        type: 'pie'
    },
    title: {
        text: ''
    },
    credits: {enabled:false},
    series: [{
        name: '缺勤人数/人',
        borderColor: Highcharts.getOptions().colors[0],
        data: []
    }]   
    };
        var academy = $("input[name='academy']:checked").val();
         $.ajax({
         url: "{:url('user/getclassattence')}", 
         type:"post",
         dataType:"json",
         data:{"academy":academy},
         async:false,
         success: function (data) {
            var json = JSON.parse(data);
            for (var i = 0; i < json.length; i++) {
                chart3.series[0].data[i] = {
                    name:json[i].class,
                    y:json[i].count,
                    color:'url(#highcharts-default-pattern-'+i+')'
                };                  
            }
        var charts = new Highcharts.Chart('container',chart);
        },
        cache: false
        });                  
      });
  </script>
  </html>

二维 x 图表：

$(document).ready(function() {
    var chart1 = {     
    chart: {
        type: 'column'
    },
    title: {
        text: '月学院考勤图'
    },
    xAxis: {
        categories:[],
        crosshair: true     
    },  
    yAxis: {
        min: 0,
        title: {
            text: '缺勤人数/人'
        }
    },
    tooltip: {
        // head + 每个 point + footer 拼接成完整的 table
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.0f} 人</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    colors: ['#6ad0d8','pink','#64E572','#FFF263'],
    plotOptions: {
        column: {
            borderWidth: 0
        }
    },
    credits: {enabled:false},
    series: []
    };

     $.ajax({
         url: "{:url('user/academymon')}", 
         type:"post",
         dataType:"json",
         async:false,
         success: function (data) {
            var json = JSON.parse(data);
            var x = [];
            for (var i = 0; i < json[0].length; i++) {
                switch (json[0][i]) {
                    case 1:
                        x.push("一月");
                        break;
                    case 2:
                        x.push("二月");
                        break;
                    case 3:
                        x.push("三月");
                        break;
                    case 4:
                        x.push("四月");
                        break;
                    case 5:
                        x.push("五月");
                        break;
                }
            }
            chart1.xAxis['categories'] = x;

            for (var i = 0; i < json.length-2; i++) {
                chart1.series[i] = {
                    name:json[1][i],
                    data:json[2+i]
                };                  
            }
            var charts = new Highcharts.Chart('container1',chart1);
            },
            cache: false
        });   
    
     
});

图片：

highcharts-ajax-tp5 controller

猜你喜欢