laravel-admin中使用Chart.js添加图表

最近项目在做统计类项目, laravel-admin中使用Chart.js添加图表 ,后台需要图表功能,使用laravel-admin结合chart.js实现需求,这里做一个记录方便是使用

laravel-admin中文文档

chart.js中文文档

控制器示例

<?php

use Encore\Admin\Layout\Content;

class ChartController extends Controller
{
    public function index(Content $content)
    {
        return $content
            ->title('Dashboard')
            ->description('介绍')
            ->view('admin.chart.tongji', ['title' => '标题..']);
//admin.chart.tongji柱状图 admin.chart.tongjilog折线图 admin.chart.tongjilog2雷达图
    }
}

可以结合其他去写

<?php

namespace App\Admin\Controllers;
use Encore\Admin\Widgets\Box;
class ChartController extends AdminController
{
    public function grid()
    {
//省略$grid = new Grid(new xxx()); $rowsji今日数据 $rowszuo昨日数据
       $grid->header(function ($query) {
           $tj = view('admin.chart.tongji',['title' => $rowsji[0]['name'].' 数据统计','label'=>"今日/昨日",'','rowsji'=>$rowsji,'rowszuo'=>$rowszuo]);
//admin.chart.tongji柱状图 admin.chart.tongjilog折线图 admin.chart.tongjilog2雷达图
           return $chart=new Box('统计图表', $tj);
        }
       
    }
}

视图resources/views/admin/chart/tongji.blade.php (柱形图)

<div class="card">
    <div class="card-header">
        <h4></h4>
    </div>
    <div class="card-body">
        <canvas id="visitors-chart"></canvas>
    </div>
</div>

<script src="//cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

<script>

    var visitorsChart = new Chart($('#visitors-chart'), {
        data: {
            labels: ['','曝光量', '点击量', '激活量', '注册量', '活跃量','启动次数',''],
            datasets: [
            {
                label: '今日',
          //数据类型 柱状图
                type: "bar",
                data: [0,{{ $rowsji[0]['baoguang'] }}, {{ $rowsji[0]['dianji'] }}, {{ $rowsji[0]['jihuo'] }}, {{ $rowsji[0]['zhuce'] }},{{ $rowsji[0]['liucun'] }},  {{ $rowsji[0]['qidong'] }},0],
                
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    '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: [
                    'red',
                    'red',
                    '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
            },
            {
                label: '昨日',
          //数据类型 柱状图
                type: "bar",
                data: [0,{{ $rowszuo[0]['baoguang'] }}, {{ $rowszuo[0]['dianji'] }}, {{ $rowszuo[0]['jihuo'] }}, {{ $rowszuo[0]['zhuce'] }},{{ $rowszuo[0]['zliucun'] }}, {{ $rowszuo[0]['qidong'] }},0],
                
                backgroundColor: [
                    'rgba(204, 238, 247, 0.2)',
                    '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(204, 238, 247, 1)',
                    'red',
                    '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: {
            legend:{
                display: true,
                position:'right',
            },
            layout: {
             
                padding: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0
                },
                
                
            },
            tooltips:{
                intersect:false
            },
            maintainAspectRatio: false,
            title: {
                    fontSize:14,
					display: true,
					text: '{{ $label }} {{ $title }}'
				},
            
            
            scales: {
                yAxes: [{
                    
                    
                }],
                xAxes: [{
                     barPercentage:0.2,
                     
                     gridLines: {
                         
                        // offsetGridLines: true,
                        lineWidth:0,
                        
                    },
                    
                }]
            }
        }
    });
    visitorsChart.canvas.parentNode.style.height = '300px';
</script>

<style>
    #visitors-chart {
        height: 200px;
    }
</style>

效果图:

视图resources/views/admin/chart/tongjilog.blade.php (折线图)

<div class="card">
    <div class="card-header">
        <h4></h4>
    </div>
    <div class="card-body">
        <canvas id="visitors-chart"></canvas>
    </div>
</div>

<script src="//cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

<script>

    var visitorsChart = new Chart($('#visitors-chart'), {
        data: {
            labels: [
                @for ($i = 0; $i < $labels['count'] ; $i++)
                    "{{ $labels['time'][$i] }}",
                @endfor  
            ],
            datasets: [
           {
                label: '曝光量',
                type: 'line',
                data: [
                    @for ($i = 0; $i < $data['count'] ; $i++)
                        {{ $data['bg'][$i] }},
                    @endfor    
                ],
                backgroundColor: 'transparent',
                borderColor: '##36a2eb',
                pointBorderColor: '#36a2eb',
                pointBackgroundColor: '#36a2eb',
                fill: false
            },
            {
                label: '点击量',
                type: 'line',
                data: [
                    @for ($i = 0; $i < $data['count'] ; $i++)
                        {{ $data['dj'][$i] }},
                    @endfor       
                ],
                backgroundColor: 'tansparent',
                borderColor: '#ffce56',
                pointBorderColor: '#ffce56',
                pointBackgroundColor: '#ffce56',
                fill: false
            },
            {
                label: '激活量',
                type: 'line',
                data: [
                    @for ($i = 0; $i < $data['count'] ; $i++)
                        {{ $data['jh'][$i] }},
                    @endfor       
                ],
                backgroundColor: 'transparent',
                borderColor: '#4bc0c0',
                pointBorderColor: '##4bc0c0',
                pointBackgroundColor: '#4bc0c0',
                fill: false
            },
            {
                label: '启动量',
                type: 'line',
                data: [
                    @for ($i = 0; $i < $data['count'] ; $i++)
                        {{ $data['qd'][$i] }},
                    @endfor       
                ],
                backgroundColor: 'tansparent',
                borderColor: '#9966ff',
                pointBorderColor: '#9966ff',
                pointBackgroundColor: '#9966ff',
                fill: false
            },
             {
                 
                label: '注册量',
                type: 'line',
                data: [
                    @for ($i = 0; $i < $data['count'] ; $i++)
                        {{ $data['zc'][$i] }},
                    @endfor       
                ],
                backgroundColor: 'tansparent',
                borderColor: '#ff9f40',
                pointBorderColor: '#ff9f40',
                pointBackgroundColor: '#ff9f40',
                fill: false
            }, 
             {
                 
                label: '活跃量',
                type: 'line',
                data: [
                    @for ($i = 0; $i < $data['count'] ; $i++)
                        {{ $data['lc'][$i] }},
                    @endfor       
                ],
                backgroundColor: 'tansparent',
                borderColor: '#ff0000',
                pointBorderColor: '#ff0000',
                pointBackgroundColor: '#ff0000',
                fill: false
            }, 
        ]
        },
        
        options: {
            
            legend:{
                display: true,
                position:'top',
            },
            layout: {
             
                padding: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0
                },
                
                
            },
            tooltips:{
                intersect:false
            },
            maintainAspectRatio: false,
            title: {
                    fontSize:14,
					display: true,
					text: '{{ $label }}{{ $title }}'
				},
            
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                    
                }],
                xAxes: [{
                    
                     
                     gridLines: {
                         
                        // offsetGridLines: true,
                        lineWidth:1,
                        
                    },
                   
                    
                    
                    
                }]
            }
        }
    });
    visitorsChart.canvas.parentNode.style.height = '300px';
</script>

<style>
    #visitors-chart {
        height: 200px;
    }
</style>

效果图:

视图resources/views/admin/chart/tongjilog2.blade.php (雷达图)

<div class="card">
    <div class="card-header">
        <h4></h4>
    </div>
    <div class="card-body">
        <canvas id="visitors-chart"></canvas>
    </div>
</div>

<script src="//cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

<script>

    var visitorsChart = new Chart($('#visitors-chart'), {
        type: "radar",
        data: {
            labels : ["曝光量","点击量","激活量","注册量","活跃量","启动次数"],
			datasets : [
			     
				{
				    label:"昨日软件总统计",
				    fontSize:20,
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					backgroundColor:"rgba(75, 192, 192,0.2)",
					borderColor:"rgba(75, 192, 192,1)",
					pointStrokeColor : "#fff",
				    data : [{{ $userzuo[0]['baoguangz'] }},{{ $userzuo[0]['dianjiz'] }},{{ $userzuo[0]['jihuoz'] }},{{ $userzuo[0]['zhucez'] }},{{ $userzuo[0]['liucunz'] }},{{ $userzuo[0]['qidongz'] }}],
				},
				{
				    label:"今日软件总统计",
				    fontSize:20,
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					backgroundColor:"rgba(255, 99, 132,0.2)",
					borderColor:"rgba(255, 99, 132,1)",
					pointStrokeColor : "#fff",
					data : [{{ $userjin[0]['baoguang'] }},{{ $userjin[0]['dianji'] }},{{ $userjin[0]['jihuo'] }},{{ $userjin[0]['zhuce'] }},{{ $userjin[0]['liucun'] }},{{ $userjin[0]['qidong'] }}],
				},
			
				
				
			]
        },
        
        options: {
            legend:{
                display: true,
                position:'bottom',
                labels:{
                    
                }
            },
            layout: {
                
                padding: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0,
                },
                
                
            },
            tooltips:{
                intersect:false,
                
            },
            maintainAspectRatio:false,
            scale: {
                ticks: {
                    beginAtZero: true,
                    // fontSize:18,
                    
                },
                gridLines:{}
            }
        }
    });
    visitorsChart.canvas.parentNode.style.height = '450px';
</script>

<style>
    #visitors-chart {
        height: 100px;
    }
</style>

效果图:

其他没有使用需求,以后用到会完善该文章。

0 评论
内联反馈
查看所有评论