自定义图表

dcat-admin 1.5已经移除了所有的图表组件，如果要在页面中加入图表组件，可以参考下面的流程

用chartjs举例，首先要下载chartjs，放到public目录下面，比如放在public/vendor/chartjs目录

然后在app/Admin/bootstrap.php引入组件：

  1. use Dcat\Admin\Facades\Admin;
  3. Admin::js('/vendor/chartjs/dist/Chart.min.js');

新建视图文件 resources/views/admin/charts/bar.blade.php

  1. <canvas id="myChart" width="400" height="400"></canvas>
  2. <script>
  4. $(function () {
  5.    var ctx = document.getElementById("myChart").getContext('2d');
  6.    var myChart = new Chart(ctx, {
  7.        type: 'bar',
  8.        data: {
  9.            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  10.            datasets: [{
  11.                label: '# of Votes',
  12.                data: [12, 19, 3, 5, 2, 3],
  13.                backgroundColor: [
  14.                    'rgba(255, 99, 132, 0.2)',
  15.                    'rgba(54, 162, 235, 0.2)',
  16.                    'rgba(255, 206, 86, 0.2)',
  17.                    'rgba(75, 192, 192, 0.2)',
  18.                    'rgba(153, 102, 255, 0.2)',
  19.                    'rgba(255, 159, 64, 0.2)'
  20.                ],
  21.                borderColor: [
  22.                    'rgba(255,99,132,1)',
  23.                    'rgba(54, 162, 235, 1)',
  24.                    'rgba(255, 206, 86, 1)',
  25.                    'rgba(75, 192, 192, 1)',
  26.                    'rgba(153, 102, 255, 1)',
  27.                    'rgba(255, 159, 64, 1)'
  28.                ],
  29.                borderWidth: 1
  30.            }]
  31.        },
  32.        options: {
  33.            scales: {
  34.                yAxes: [{
  35.                    ticks: {
  36.                        beginAtZero:true
  37.                    }
  38.                }]
  39.            }
  40.        }
  41.    }); 
  42. });
  43. </script>

然后就可以在页面的任何地方引入这个图表视图了：

  1. public function index()
  2. {
  3.     return Admin::content(function (Content $content) {
  5.         $content->header('chart');
  6.         $content->description('.....');
  8.         $content->body(view('admin.charts.bar'));
  9.     });
  10. }

按照上面的方式可以引入任意图表库，多图表页面的布局，参考视图布局