README

该包可以直接从 Laravel/Blade 生成 Chart.js 图表，无需与 JavaScript 交互。

简单用法

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

控制器:

use LaravelDaily\LaravelCharts\Classes\LaravelChart;

// ...

$chart_options = [
    'chart_title' => 'Users by months',
    'report_type' => 'group_by_date',
    'model' => 'App\Models\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 关系的字段分组

注意：从 Laravel 8 开始，所有模型都放在名为 Models 的文件夹中（App\Models）

全部选项的示例

$chart_options = [
    'chart_title' => 'Transactions by dates',
    'chart_type' => 'line',
    'report_type' => 'group_by_date',
    'model' => 'App\Models\Transaction',
    'conditions'            => [
        ['name' => 'Food', 'condition' => 'category_id = 1', 'color' => 'black', 'fill' => true],
        ['name' => 'Transport', 'condition' => 'category_id = 2', 'color' => 'blue', 'fill' => true],
    ],

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

    'aggregate_function' => 'sum',
    'aggregate_field' => 'amount',
    'aggregate_transform' => function($value) {
        return round($value / 100, 2);
    },
    
    '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 模型的名称，从该模型中获取数据；
name（可选）- 仅作为标题显示的文本标题，否则使用图例；
conditions（可选，仅适用于 line 图表类型）- 多个数据集的条件数组（名称 + 原始条件 + 颜色）；
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() 不相关。
aggregate_transform（可选）- 用于聚合数字的额外转换的回调函数
filter_field（可选）- 仅显示由该日期时间字段筛选的数据（见下文）
filter_days（可选）- 见 filter_field 上文 - 仅显示该字段的最后 filter_days 天。例如，通过 created_at 字段显示最后的 30 天。
filter_period（可选）- 另一种通过字段进行筛选的方式，仅显示最后一周 / 一个月 / 一年的记录。可能的值是 "week"，"month"，"year"。
continuous_time（可选）- 显示图表上的所有日期，包括没有数据的日期。
show_blank_data（可选）- 即使数据为空，也根据 filter_days 显示日期。
range_date_start（可选）- 通过 filter_field 显示日期范围的日期，这是开始日期。
range_date_end (可选) - 通过 filter_field 显示日期范围内的数据，这是结束日期。
field_distinct (可选) - 需要字段名称，将应用 distinct(fieldname)
style_class (可选) - 在画布中添加CSS类
date_format (可选) - 添加日期格式，默认为美国格式 Y-m-d
where_raw (可选) - 多次咨询情况下的条件
chart_height (可选) - 在选项中添加高度，默认 300px
date_format_filter_days (可选) - 添加Filter天数的日期格式
withoutGlobalScopes (可选) - 从查询模型中移除全局作用域限制
with_trashed (可选) - 包含软删除的模型
only_trashed (可选) - 仅显示软删除的模型
top_results (可选，整数) - 限制显示的结果数量，见问题 #49
chart_color (可选，rgba值，如 "0,255,255") - 定义图表的颜色
labels (可选，键值数组) - 定义旧值和新值之间的键值数组映射
hidden (可选，布尔值) 隐藏当前数据集。当在一个图表中有多个数据集时很有用
stacked (可选，布尔值，仅适用于条形图) 当日期或字符串匹配时堆叠图表数据，而不是相邻显示

关系示例

$chart_options = [
    'chart_title' => 'Transactions by user',
    'chart_type' => 'line',
    'report_type' => 'group_by_relationship',
    'model' => 'App\Models\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\Models\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\Models\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\Models\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

多个数据集

这是v0.1.27的新功能。您可以向 LaravelChart 构造函数提供多个设置数组，它们将在同一图表上绘制。

$settings1 = [
    'chart_title'           => 'Users',
    'chart_type'            => 'line',
    'report_type'           => 'group_by_date',
    'model'                 => 'App\Models\User',
    'group_by_field'        => 'created_at',
    'group_by_period'       => 'day',
    'aggregate_function'    => 'count',
    'filter_field'          => 'created_at',
    'filter_days'           => '30',
    'group_by_field_format' => 'Y-m-d H:i:s',
    'column_class'          => 'col-md-12',
    'entries_number'        => '5',
    'translation_key'       => 'user',
    'continuous_time'       => true,
];
$settings2 = [
    'chart_title'           => 'Projects',
    'chart_type'            => 'line',
    'report_type'           => 'group_by_date',
    'model'                 => 'App\Models\Project',
    // ... other values identical to $settings1
];

$chart1 = new LaravelChart($settings1, $settings2);

许可协议

MIT许可协议（MIT）。有关更多信息，请参阅许可文件

laraveldaily / laravel-charts

维护者

详细信息