Laravel按月年生成报表图表：区分同月份不同年份数据

控制器修改方案 #

核心问题是原代码仅按月份分组，导致不同年份的同月份数据被合并。需要调整分组逻辑，按年份+月份的组合进行分组，同时直接生成Jan'21格式的显示标签。

示例修改代码 #

假设原控制器查询逻辑如下：

// 原错误分组逻辑（仅按月份分组）
$monthlyData = \App\Models\Order::select(
    DB::raw('MONTH(created_at) as month'),
    DB::raw('SUM(total_amount) as total')
)
->groupBy('month')
->get();

修改为：

$monthlyData = \App\Models\Order::select(
    // 直接生成Jan'21格式的月份标签
    DB::raw("DATE_FORMAT(created_at, '%b\'%y') as month_label"),
    DB::raw('SUM(total_amount) as total'),
    // 用于排序的年份和月份字段（可选但推荐）
    DB::raw('YEAR(created_at) as year'),
    DB::raw('MONTH(created_at) as month')
)
// 按年份、月份、标签分组，确保跨年份同月份数据独立
->groupBy('year', 'month', 'month_label')
// 按年份、月份升序排序，保证图表顺序正确
->orderBy('year', 'asc')
->orderBy('month', 'asc')
->get();

// 转换为前端需要的键值对格式（标签 => 总金额）
$chartData = $monthlyData->pluck('total', 'month_label')->toArray();

return response()->json($chartData);

关键说明 #

• DATE_FORMAT(created_at, '%b\'%y')：%b生成月份英文缩写（Jan/Feb...），%y生成两位年份（21/22...），通过转义的单引号拼接成Jan'21格式。
• 分组时必须包含year和month：即使month_label已经包含年份信息，基于原始日期字段分组能避免数据库因格式解析差异导致的分组错误，同时方便后续排序。

前端Highcharts适配修改 #

前端只需直接使用控制器返回的month_label作为X轴类别，无需额外处理月份格式。

示例修改代码 #

假设原前端代码如下：

// 原前端逻辑（静态或仅月份的类别）
Highcharts.chart('report-chart', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', ...]
    },
    series: [{
        name: '总金额',
        data: [1200, 1800, 1500, ...]
    }]
});

修改为通过AJAX获取数据并渲染：

// 从后端接口获取处理好的报表数据
$.get('/api/monthly-report', function(chartData) {
    // 提取X轴标签和对应金额数据
    const categories = Object.keys(chartData);
    const totalAmounts = Object.values(chartData);

    Highcharts.chart('report-chart', {
        xAxis: {
            categories: categories,
            title: { text: '月份' }
        },
        series: [{
            name: '总金额',
            data: totalAmounts,
            type: 'column' // 可根据需求更换为line/bar等类型
        }]
    });
});

额外注意事项 #

• 若你的日期字段不是created_at，或金额字段不是total_amount，请替换为实际业务字段。
• 如需支持多语言月份缩写，可在控制器中手动映射月份（比如中文的'1月'），或使用Highcharts的本地化配置。

内容的提问来源于stack exchange，提问作者Arya Rizky Sandi