Filament Apex Charts 开源项目教程

Filament Apex Charts 开源项目教程

filament-apex-charts Apex Charts integration for Filament PHP. 项目地址: https://gitcode.com/gh_mirrors/fi/filament-apex-charts

1. 项目介绍

Filament Apex Charts 是一个将 Apex Charts 集成到 Filament PHP 的开源项目。Apex Charts 是一个现代的图表库，支持多种图表类型，而 Filament 是一个用于构建 Laravel 应用的优雅后台系统。通过这个项目，开发者可以轻松地在 Filament 中使用 Apex Charts 来展示数据，提升后台界面的视觉效果和数据展示能力。

2. 项目快速启动

安装

首先，确保你已经安装了 Laravel 和 Filament。然后，通过 Composer 安装 Filament Apex Charts 包：

composer require leandrocfe/filament-apex-charts:"^3.1"

注册插件

在 Filament 的 Panel 类中注册插件：

use Leandrocfe\FilamentApexCharts\FilamentApexChartsPlugin;

public function panel(Panel $panel): Panel
{
    return $panel->plugins([
        FilamentApexChartsPlugin::make(),
    ]);
}

创建图表小部件

使用 Artisan 命令创建一个新的图表小部件：

php artisan make:filament-apex-charts BlogPostsChart

这将生成一个 app/Filament/Widgets/BlogPostsChart.php 文件。你可以在这个文件中配置图表的选项：

namespace App\Filament\Widgets;

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class BlogPostsChart extends ApexChartWidget
{
    protected static string $chartId = 'blogPostsChart';
    protected static string $heading = 'Blog Posts Chart';

    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'bar',
                'height' => 300,
            ],
            'series' => [
                [
                    'name' => 'Blog Posts',
                    'data' => [7, 4, 6, 10, 14, 7, 5, 9, 10, 15, 13, 18],
                ],
            ],
            'xaxis' => [
                'categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                        'fontWeight' => 600,
                    ],
                ],
            ],
            'yaxis' => [
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'colors' => ['#f59e0b'],
        ];
    }
}

现在，你可以在 Filament 的仪表盘中查看新的图表小部件。

3. 应用案例和最佳实践

设置图表标题

你可以通过设置 $heading 属性来为图表添加标题：

protected static string $heading = 'Blog Posts Chart';

或者使用 getHeading() 方法动态设置标题。

隐藏头部内容

如果你不需要显示头部内容，可以不提供 $heading、getHeading()、getFormSchema() 和 getOptions()。

设置图表 ID

为图表设置一个唯一的 ID：

protected static string $chartId = 'blogPostsChart';

设置小部件高度

可以通过 $contentHeight 属性或 getContentHeight() 方法设置小部件的高度：

protected static int $contentHeight = 300; // px

设置小部件底部内容

可以通过 $footer 属性或 getFooter() 方法设置小部件的底部内容：

protected static string $footer = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry';

过滤图表数据

你可以使用 Form Builder 组件创建自定义过滤表单，以便动态更改图表显示的数据：

use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\TextInput;

protected function getFormSchema(): array
{
    return [
        TextInput::make('title')->default('My Chart'),
        DatePicker::make('date_start')->default('2023-01-01'),
        DatePicker::make('date_end')->default('2023-12-31'),
    ];
}

在 getOptions() 方法中使用过滤表单的数据：

protected function getOptions(): array
{
    $title = $this->filterFormData['title'];
    $dateStart = $this->filterFormData['date_start'];
    $dateEnd = $this->filterFormData['date_end'];

    return [
        // 图表选项
    ];
}

实时更新（轮询）

默认情况下，图表小部件每

filament-apex-charts Apex Charts integration for Filament PHP. 项目地址: https://gitcode.com/gh_mirrors/fi/filament-apex-charts