在user数据模块的表格头部插入一个饼状图表,来显示用户性别比例
步骤一:
在UserController 添加 use Encore\Admin\Widgets\Box;
步骤二:
设置grid头部,查询性别比例数据
$grid->header(function ($query) {
$gender = $query->select(DB::raw('count(sex) as count, sex'))
->groupBy('sex')->get()->pluck('count', 'sex')->toArray();
$doughnut = view('admin.chart.gender', compact('gender'));
return new Box('性别比例', $doughnut);
});
$gender 数据为
步骤三:
执行 composer require laravel-admin-ext/chartjs 安装页面需要的 chartjs
步骤四:
创建视图文件resources/views/admin/chart/gender.blade.php
内容如下:
<canvas id="doughnut" width="200" height="200"></canvas>
<script>
$(function () {
var config = {
type:'doughnut',
data: {
datasets: [{
data: [{{ $gender[0] }}, {{ $gender[1] }}, {{ "" }}],
backgroundColor: [ 'rgb(54, 162, 235)','rgb(255, 99, 132)','rgb(255, 205, 86)']
}],
labels: ['男','女','未知' ]
},
options: {maintainAspectRatio:false}
};
var ctx =document.getElementById('doughnut').getContext('2d');
new Chart(ctx,config);
});
</script>
注释: data 是php 数据
步骤五:刷新页面
完美!!!!