laravel-admin gird 饼状图表

在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 数据

步骤五:刷新页面


完美!!!!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 下面是挑选出的9个 JavaScript 图表库: Chart.js Chartist FlexChart Ech...
    zhangxuepeng阅读 10,453评论 0 5
  • 第一章 HTML5 (2014年10月29日发布)新特性: 10个 (1)新的语义标签 (2)增强型表单 (3)视...
    fastwe阅读 4,547评论 0 1
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 12,186评论 0 10
  • 午饭时分,接到公公的电话,女儿高烧三九度五。午休的办公室很安静,与电话那头公公低沉而急促的声音形成鲜...
    冰激凌配土豆阅读 3,318评论 1 9
  • 感谢我是个四川人,听阿信老师带着川味的普通话讲课感觉和他一样精神抖擞,拿起笔写下了触动我的一点感想。 1、于不疑处...
    五月Mei阅读 1,319评论 0 1

友情链接更多精彩内容