Filament面板中日度体积统计Chart Widget未显示求助

我为项目的data_log模块开发了Chart Widget，先完成了月度体积统计的LogAppChart.php，数据库包含users、metergas、logs三张表：

• metergas表字段：serialNo、connectivity、user_id
• logs表字段：id、condition、volume、type_io、battery、metergas_id

后续编写了逻辑类似的日度体积统计DayLogAppChart.php，用于按小时统计单日体积，但该Widget未在Filament面板中显示。

月度统计代码（LogAppChart.php） #

<?php

namespace App\Filament\Widgets;

use App\Models\Log;
use App\Models\Metergas;
use Filament\Widgets\ChartWidget;
use Illuminate\Support\Facades\Auth;
use Carbon\Carbon;
use Carbon\CarbonPeriod;
use Illuminate\Support\Str; // To use the random color function

class LogAppChart extends ChartWidget
{
    protected static ?string $heading = 'Volume PerMonth';
    protected static ?string $pollingInterval = null;
    protected static ?string $maxHeight = '300px';
    protected int | string | array $columnSpan = 'full';
    protected function getData(): array
    {
        $user_id = Auth::user()->id;
        $metergas = Metergas::where('user_id', $user_id)
            ->get();

        $data_log = [];
        $period = CarbonPeriod::create(Carbon::now()->subMonth()->startOfDay(), '1 day', Carbon::now()->startOfDay());
        $allDates = iterator_to_array($period);

        $allDates = array_map(fn ($date) => $date->format('Y-m-d'), $allDates);

        if ($metergas->isNotEmpty()) {
            foreach ($metergas as $item) {
                $logs = Log::where('metergas_id', $item->id)
                    ->whereDate('created_at', '>=', Carbon::now()->subMonth())
                    ->get()
                    ->groupBy(function ($date) {
                        return Carbon::parse($date->created_at)->format('Y-m-d');
                    })
                    ->map(function ($dayLogs) {
                        return $dayLogs->sum('volume');
                    });

                $dailyData = [];
                foreach ($allDates as $date) {
                    $dailyData[] = $logs->get($date, 0);
                }

                // Generate a random color for each dataset
                $color = sprintf('#%06X', mt_rand(0, 0xFFFFFF));

                $data_log[] = [
                    'label' => 'Metergas ' . $item->serialNo,
                    'data' => $dailyData,
                    'backgroundColor' => $color,
                    'borderColor' => $color,
                ];
            }
        }

        return [
            'datasets' => $data_log,
            'labels' => $allDates,
        ];
    }

    protected function getType(): string
    {
        return 'line';
    }
}

日度统计代码（DayLogAppChart.php） #

<?php

namespace App\Filament\Widgets;

use App\Models\Log;
use App\Models\Metergas;
use Filament\Widgets\ChartWidget;
use Illuminate\Support\Facades\Auth;
use Carbon\Carbon;
use Carbon\CarbonPeriod;
use Illuminate\Support\Str; // To use the random color function

class DayLogAppChart extends ChartWidget
{
    protected static ?string $heading = 'Volume PerDay';
    protected static ?string $pollingInterval = null;
    protected static ?string $maxHeight = '300px';
    protected int | string | array $columnSpan = 'full';
    protected function getData(): array
    {
        $user_id = Auth::user()->id;
        $metergas = Metergas::where('user_id', $user_id)
            ->get();

        $data_log = [];
        $period = CarbonPeriod::create(Carbon::now()->subDay()->startOfHour(), '1 hour', Carbon::now()->startOfHour());
        $allHours = iterator_to_array($period);

        $allHours = array_map(fn ($date) => $date->format('Y-m-d H:00'), $allHours);

        if ($metergas->isNotEmpty()) {
            foreach ($metergas as $item) {
                $logs = Log::where('metergas_id', $item->id)
                    ->whereDate('created_at', '>=', Carbon::now()->subDay())
                    ->get()
                    ->groupBy(function ($log) {
                        return Carbon::parse($log->created_at)->format('Y-m-d H:00');
                    })
                    ->map(function ($hourLogs) {
                        return $hourLogs->sum('volume');
                    });

                    foreach ($allHours as $hourLabel) {
                        $hourlyData[] = $logs->get($hourLabel, 0);
                }

                // Generate a random color for each dataset
                $color = sprintf('#%06X', mt_rand(0, 0xFFFFFF));

                $data_log[] = [
                    'label' => 'Metergas ' . $item->serialNo,
                    'data' => $hourlyData,
                    'backgroundColor' => $color,
                    'borderColor' => $color,
                ];
            }
        }
        // dd($data_log, $allHours); // Uncomment for debugging
        return [
            'datasets' => $data_log,
            'labels' => $allHours,
        ];
    }

    protected function getType(): string
    {
        return 'line';
    }
}

相关截图说明 #

截图显示Filament面板中仅展示了月度统计图表，日度统计图表未出现。

排查与修复方案 #

1. 注册Widget
   确保DayLogAppChart已在对应Filament面板的getWidgets()方法中注册，示例：

protected function getWidgets(): array
{
    return [
        LogAppChart::class,
        DayLogAppChart::class, // 必须添加此行
    ];
}

2. 修复变量未初始化错误
   日度统计代码中$hourlyData未提前声明，会引发Undefined variable错误，导致Widget无法渲染。需在遍历metergas时初始化变量：

foreach ($metergas as $item) {
    $hourlyData = []; // 新增此行初始化数组
    $logs = Log::where('metergas_id', $item->id)
    // ... 其余代码保持不变
}

3. 调试数据生成
   取消注释日度代码中的dd($data_log, $allHours)，查看数据是否正常生成，确认是否因无数据导致Widget不显示。

4. 清除缓存
   运行以下命令清除Filament缓存：

php artisan filament:clear-cache

内容的提问来源于stack exchange，提问作者Rafi Ari Ghani