README

Laravel chart 是一个可定制和灵活的包，用于在 Laravel 中创建图表。

安装

1. 使用 Composer 安装包及其依赖项

   composer require kamandlou/laravel-chart

2. 使用 Artisan 命令发布包文件

   php artisan chart:install

使用指南

将脚本添加到您的页面中

• <script src="{{ asset('js/chart.js/dist/chart.min.js') }}"></script>

• <script>
    {!! $chartScript !!}
  </script>
  

在您的页面中创建一个 canvas

• <canvas id="myChart"></canvas>

您有两种使用方式

  return Chart::chart('myChart', [
     'type' => 'bar',
     'data' => [
         'labels' => ['Red', 'Blue', 'Yellow'],
         'datasets' => [
             [
                 'label' => '# of Votes',
                 'data' => [12, 19, 3],
                 'backgroundColor' => [
                     'rgba(255, 99, 132, 0.2)',
                     'rgba(54, 162, 235, 0.2)',
                     'rgba(255, 206, 86, 0.2)',
                 ],
                 'borderColor' => [
                     'rgba(255, 99, 132, 1)',
                     'rgba(54, 162, 235, 1)',
                     'rgba(255, 206, 86, 1)',
                 ],
                 'borderWidth' => 1
             ]
         ]
     ],
     'options' => [
         'scales' => [
             'y' => [
                 'beginAtZero' => true
             ]
         ]
     ]
 ])->render('index');

或者

return Chart::id('myChart')
        ->type('bar')
        ->labels(['Red', 'Blue', 'Yellow'])
        ->datasets([
            [
                'label' => '# of Votes',
                'data' => [12, 19, 3],
                'backgroundColor' => [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                ],
                'borderColor' => [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                ],
                'borderWidth' => 1
            ]
        ])
        ->options([
            'scales' => [
                'y' => [
                    'beginAtZero' => true
                ]
            ]
        ])
        ->render('index');

要查看更多选项，请访问 chart.js 文档

Chart.js 文档