Laravel Backpack图表异常：所有数据集显示于首个标签下求助

你遇到的核心问题是数据集的数据格式不符合Chart.js（Backpack Chart Pro基于它）的要求：每个数据集需要传递一个和标签数量匹配的数组，数组中的每个元素对应一个标签位置的数据；而你现在传递的是单个数值，Chart.js会默认把这个数值绑定到第一个标签，导致所有数据都堆在第一个标签下。

修正步骤 #

1. 统一标签与数据集的数组长度
   先定义好12个月份的标签数组，然后每个数据集都要生成一个长度为12的数组，每个位置对应对应月份的统计值，没有数据的月份填0。

2. 优化数据查询与处理
   不要手动单独统计每个月的数据，用Eloquent的分组查询可以更高效地获取每个月的统计结果，再填充到对应位置。

修改后的代码示例 #

// 1. 定义12个月份的标签
$labels = [
    'January', 'February', 'March', 'April', 
    'May', 'June', 'July', 'August', 
    'September', 'October', 'November', 'December'
];
$this->chart->labels($labels);

// 2. 从模型中按月份统计数据（假设模型为Expense，时间字段为created_at）
$monthlyStats = Expense::selectRaw('MONTH(created_at) as month, COUNT(*) as total')
    ->groupBy('month')
    ->pluck('total', 'month') // 得到键为月份（1-12）、值为统计数的集合
    ->toArray();

// 3. 生成对应标签顺序的数据集数组，没有数据的月份填0
$expData = [];
foreach (range(1, 12) as $month) {
    $expData[] = $monthlyStats[$month] ?? 0;
}

// 4. 创建数据集
$this->chart->dataset('Monthly Expenses', 'bar', $expData)
    ->color('rgba(205, 32, 31, 1)')
    ->backgroundColor('rgba(205, 32, 31, 0.4)');

多数据集的情况 #

如果需要同时展示多个数据集（比如收入和支出），只需要重复上述步骤，为每个数据集生成对应的长度为12的数组即可：

// 统计收入数据
$incomeStats = Income::selectRaw('MONTH(created_at) as month, COUNT(*) as total')
    ->groupBy('month')
    ->pluck('total', 'month')
    ->toArray();

$incomeData = [];
foreach (range(1, 12) as $month) {
    $incomeData[] = $incomeStats[$month] ?? 0;
}

// 添加收入数据集
$this->chart->dataset('Monthly Income', 'bar', $incomeData)
    ->color('rgba(32, 205, 50, 1)')
    ->backgroundColor('rgba(32, 205, 50, 0.4)');

这样处理后，每个数据集的数值会精准对应到对应的月份标签上，不会再出现全部堆在第一个标签的问题。

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