README

将图表.js 图表直接从 Laravel/Blade 生成，无需与 JavaScript 交互。

注意：包处于早期开发阶段，生成简单案例，因此语法/参数可能在未来版本中更改，请谨慎使用。

简单用法

如果您想生成上面的图表，按 created_at 字段的月份对 users 记录进行分组，以下是代码。

控制器:

use LaravelDaily\LaravelCharts\Classes\LaravelChart;

// ...

$chart_options = [
    'chart_title' => 'Users by months',
    'report_type' => 'group_by_date',
    'model' => 'App\User',
    'group_by_field' => 'created_at',
    'group_by_period' => 'month',
    'chart_type' => 'bar',
];
$chart1 = new LaravelChart($chart_options);

return view('home', compact('chart1'));

视图文件

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">

                    <h1>{{ $chart1->options['chart_title'] }}</h1>
                    {!! $chart1->renderHtml() !!}

                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
{!! $chart1->renderChartJsLibrary() !!}
{!! $chart1->renderJs() !!}
@endsection

安装

composer require laraveldaily/laravel-charts

目前无需其他配置或参数。

使用方法

您需要在控制器中创建 LaravelChart 对象，并传递选项数组。

$chart = new LaravelChart($options);

然后将它传递到视图中，作为一个变量

return view('dashboard', compact('chart'));

可用的报告和选项

目前该包支持两种类型的图表/报告

group_by_date - 同一表中记录的数量，按时间周期分组 - 天/周/月/年；
group_by_string - 同一表中记录的数量，按任何字符串字段分组，如 name；
group_by_relationship - 同一表中记录的数量，按 belongsTo 关系的字段分组

全部选项示例

$chart_options = [
    'chart_title' => 'Transactions by dates',
    'chart_type' => 'line',
    'report_type' => 'group_by_date',
    'model' => 'App\Transaction',

    'group_by_field' => 'transaction_date',
    'group_by_period' => 'day',

    'aggregate_function' => 'sum',
    'aggregate_field' => 'amount',
    
    'filter_field' => 'transaction_date',
    'filter_days' => 30, // show only transactions for last 30 days
    'filter_period' => 'week', // show only transactions for this week
    'continuous_time' => true, // show continuous timeline including dates without data
];

chart_title（必需）- 一个文本标题，将显示为图例；
chart_type（必需）- 可能的值："line"，"bar"，"pie"；
report_type（必需）- 见上方，可以是 group_by_date，group_by_string 或 group_by_relationship；
model（必需）- Eloquent 模型的名称，从哪里获取数据；
group_by_field（必需）- 将在 group_by 子句中使用的数据库字段名称；
group_by_period（可选，仅适用于 group_by_date 报告类型）- 可能的值是 "day"，"week"，"month"，"year"；
relationship_name（可选，仅适用于 group_by_relationship 报告类型）- 包含 belongsTo 关系的模型方法的名称。
aggregate_function（可选）- 您不仅可以查看记录的数量，还可以查看它们的 SUM() 或 AVG()。可能的值："count"（默认）,"avg"，"sum"。
aggregate_field（可选）- 见 aggregate_function 上方，用于 SUM() 或 AVG() 函数的字段名称。对于 COUNT() 无关。
filter_field（可选）- 仅显示通过该日期时间字段筛选的数据（见下文）
filter_days（可选）- 见 filter_field 上方 - 仅显示该字段的最后 filter_days 天。例如，通过 created_at 字段显示最后 30 天。
filter_period（可选）- 另一种通过字段筛选数据的方法，显示最后一周 / 一个月 / 一年的记录。可能的值是 "week"，"month"，"year"。
continuous_time（可选）- 在图表上显示所有日期，包括没有数据的日期。

带有关系的示例

$chart_options = [
    'chart_title' => 'Transactions by user',
    'chart_type' => 'line',
    'report_type' => 'group_by_relationship',
    'model' => 'App\Transaction',

    'relationship_name' => 'user', // represents function user() on Transaction model
    'group_by_field' => 'name', // users.name

    'aggregate_function' => 'sum',
    'aggregate_field' => 'amount',
    
    'filter_field' => 'transaction_date',
    'filter_days' => 30, // show only transactions for last 30 days
    'filter_period' => 'week', // show only transactions for this week
];

注意：目前包处于早期版本，因此这些参数可能在将来更改。

在 Blade 中渲染图表

在将 $chart 变量传递到 Blade 后，您可以通过以下三个操作来渲染它

操作 1. 渲染 HTML.

在任何 Blade 代码中调用此函数

{!! $chart1->renderHtml() !!}

它将生成类似以下内容

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

操作 2. 渲染 JavaScript 库

该包使用 Chart.js 库，因此我们需要在脚本部分初始化它。

{!! $chart1->renderChartJsLibrary() !!}

它将生成类似以下内容

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

操作 3. 渲染特定图表的 JavaScript

在 Chart.js 加载后，执行此操作

{!! $chart1->renderJs() !!}

使用多个图表

您可以在同一页面上显示多个图表，分别初始化它们。

控制器:

public function index()
{
    $chart_options = [
        'chart_title' => 'Users by months',
        'report_type' => 'group_by_date',
        'model' => 'App\User',
        'group_by_field' => 'created_at',
        'group_by_period' => 'month',
        'chart_type' => 'bar',
        'filter_field' => 'created_at',
        'filter_days' => 30, // show only last 30 days
    ];

    $chart1 = new LaravelChart($chart_options);


    $chart_options = [
        'chart_title' => 'Users by names',
        'report_type' => 'group_by_string',
        'model' => 'App\User',
        'group_by_field' => 'name',
        'chart_type' => 'pie',
        'filter_field' => 'created_at',
        'filter_period' => 'month', // show users only registered this month
    ];

    $chart2 = new LaravelChart($chart_options);

    $chart_options = [
        'chart_title' => 'Transactions by dates',
        'report_type' => 'group_by_date',
        'model' => 'App\Transaction',
        'group_by_field' => 'transaction_date',
        'group_by_period' => 'day',
        'aggregate_function' => 'sum',
        'aggregate_field' => 'amount',
        'chart_type' => 'line',
    ];

    $chart3 = new LaravelChart($chart_options);

    return view('home', compact('chart1', 'chart2', 'chart3'));
}

视图:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">

                    <h1>{{ $chart1->options['chart_title'] }}</h1>
                    {!! $chart1->renderHtml() !!}

                <hr />

                    <h1>{{ $chart2->options['chart_title'] }}</h1>
                    {!! $chart2->renderHtml() !!}

                    <hr />

                    <h1>{{ $chart3->options['chart_title'] }}</h1>
                    {!! $chart3->renderHtml() !!}

                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
{!! $chart1->renderChartJsLibrary() !!}

{!! $chart1->renderJs() !!}
{!! $chart2->renderJs() !!}
{!! $chart3->renderJs() !!}
@endsection

许可协议

MIT许可证（MIT）。请参阅许可证文件获取更多信息。

tpharaoh / laravel-charts

维护者

详细信息