highcharts-ajax-tp5 controller

本文主要是介绍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 拼接成完整的 tableheaderFormat: '<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});   });

图片：