使用Eloquent生成Larapex Chart出现空白图表的技术求助

你遇到的图表空白问题，主要出在查询逻辑错误和数据集格式不匹配两个关键点上，咱们一步步来修正：

1. 先修复Eloquent查询逻辑 #

你之前的groupBy('created_at')是错误的——created_at是精确到时分秒的datetime字段，每条记录的这个值几乎都不一样，会导致分组后每个记录单独成组，所以dd()出来会有多个date=6的重复条目，根本没实现按月份汇总的目的。

另外，where('created_at', '>=', now()->month)的条件也不对，now()->month返回的是当前月份的数字（比如6），用datetime和数字直接比较逻辑不成立。如果你的需求是统计今年全年各月份的访问量，应该改成这样：

$result = Visit::select(
    DB::raw('MONTH(created_at) as month'), // 提取月份（1-12）
    DB::raw('COUNT(*) as views') // 统计该月访问量
)
->whereYear('created_at', now()->year) // 限定查询今年的数据
->groupBy('month') // 按月份分组
->orderBy('month') // 按月份排序
->get();

这样查询后，会得到每个月份（有数据的月份）的汇总访问量，格式是[{month:1, views:5}, {month:6, views:3}, ...]。

2. 把查询结果转成Larapex需要的格式 #

Larapex Chart的柱状图要求数据集是对应X轴每个月份的数值数组，而且即使某个月份没有数据，也要填0，不然图表会因为数据长度不匹配显示空白。

咱们可以先初始化一个全年12个月的数组（默认值0），再把查询到的数值填充进去：

// 初始化12个月份的数组，默认访问量为0
$monthlyViews = array_fill(0, 12, 0);

// 遍历查询结果，把对应月份的访问量填到数组里
foreach ($result as $item) {
    // 注意：数据库返回的month是1-12，数组索引是0-11，所以要减1
    $monthlyViews[$item->month - 1] = $item->views;
}

现在$monthlyViews就是一个长度为12的数组，每个元素对应从Jan到Dec的访问量，没有数据的月份自动填充0。

3. 修正图表初始化代码 #

你之前直接把$resArray传给setDataset()，但Larapex需要的是包含数据集名称和数据的数组结构，修改后的代码如下：

$chart = (new LarapexChart())->setTitle('Users')
    ->setSubtitle('From January To December')
    ->setType('bar')
    ->setXAxis(['Jan', 'Feb', 'Mar', 'Apr','May', 'Jun', 'Jul', 'Aug', 'Sep','Oct', 'Nov', 'Dec'])
    ->setGrid(true)
    ->setDataset([
        [
            'name' => 'Total Visits', // 数据集的名称（会显示在图例里）
            'data' => $monthlyViews // 刚才整理好的月度访问量数组
        ]
    ])
    ->setStroke(1);

完整的可运行代码 #

把上面的步骤整合起来，最终代码是这样的：

// 1. 查询今年各月份的访问量汇总
$result = Visit::select(
    DB::raw('MONTH(created_at) as month'),
    DB::raw('COUNT(*) as views')
)
->whereYear('created_at', now()->year)
->groupBy('month')
->orderBy('month')
->get();

// 2. 整理成Larapex需要的数据格式
$monthlyViews = array_fill(0, 12, 0);
foreach ($result as $item) {
    $monthlyViews[$item->month - 1] = $item->views;
}

// 3. 创建图表
$chart = (new LarapexChart())->setTitle('Users')
    ->setSubtitle('From January To December')
    ->setType('bar')
    ->setXAxis(['Jan', 'Feb', 'Mar', 'Apr','May', 'Jun', 'Jul', 'Aug', 'Sep','Oct', 'Nov', 'Dec'])
    ->setGrid(true)
    ->setDataset([
        [
            'name' => 'Total Visits',
            'data' => $monthlyViews
        ]
    ])
    ->setStroke(1);

这样修改后，图表就能正确显示每个月份的访问量，没有数据的月份也会显示0，不会再出现空白的情况了。

内容的提问来源于stack exchange，提问作者kya