laravel-admin中使用chart图表流程步骤

Laravel  /  管理员 发布于 2年前   1460

一般后台管理系统都会实现图表之类的功能，以下就是laravel-admin中chart图表使用

安装

composer require laravel-admin-ext/chartjs

配置

php artisan vendor:publish --tag=laravel-admin-chartjs

视图

<h4>近期订单柱状图</h4>
<canvas id="myChart"></canvas>
<script>
    $(function () {
        var ctx = document.getElementById("myChart").getContext('2d');
        let date = "{{ $date }}";
        let dateArr = date.split(',');
        var total = "{{ $total }}";
        var totalArr = total.split(',');
        var myChart = new Chart(ctx, {
            type: 'bar',    // 类型值有line，bar，radar，doughnut，pie
            data: {
                labels: dateArr,    // 横坐标数组
                datasets: [{
                    label: '近期订单成交量',
                    data: totalArr,   // 纵坐标数组
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });
    });
</script>

控制器

使用Content::body($content)将数据渲染给视图

public function index(Content $content)
    {
        $data = $this->orderGraph(7);

        return $content
            ->title('数据看板')
            ->description('Dashboard')
            ->row(view('dashboard')
            ->with(['date' => implode(',', $data[0]), 'total' => implode(',', $data[1])]));
    }