如何从Laravel查询结果中提取唯一年份用于ApexCharts分类

问题分析 #

你当前的数据结构是按采购类型分组，每个类型下仅包含有数据的年份，导致ApexCharts渲染时每个系列的x轴分类不统一，出现重复年份。需要先提取全局唯一的年份数组作为统一x轴，再重构每个采购类型的数据，缺失年份补0。

解决方案步骤 #

1. 提取全局唯一年份

合并两个查询结果的所有年份，去重后排序：

// 假设$queryPengadaanTender是你对应pengadaanTender的数据源查询
$allYears = collect(array_merge(
    $queryPengadaanNonTender->pluck('tahun')->toArray(),
    $queryPengadaanTender->pluck('tahun')->toArray()
))->unique()->sort()->values()->toArray();

2. 重构非招标采购数据结构

去掉冗余的集合分组操作，整理成ApexCharts兼容的格式：

$pengadaanNonTender = $queryPengadaanNonTender->groupBy('pengadaan')->map(function ($group) use ($allYears) {
    // 将当前组的年份与数量转为键值对映射
    $yearCountMap = $group->pluck('jml', 'tahun')->toArray();
    
    // 按全局年份数组生成对应数据，无数据的年份补0
    return collect($allYears)->map(function ($year) use ($yearCountMap) {
        return $yearCountMap[$year] ?? 0;
    })->toArray();
})->toArray();

3. 重构招标采购数据结构

用相同逻辑处理招标采购数据：

$pengadaanTender = $queryPengadaanTender->groupBy('pengadaan')->map(function ($group) use ($allYears) {
    $yearCountMap = $group->pluck('jml', 'tahun')->toArray();
    
    return collect($allYears)->map(function ($year) use ($yearCountMap) {
        return $yearCountMap[$year] ?? 0;
    })->toArray();
})->toArray();

4. 适配ApexCharts配置

将处理后的数据传递给图表，示例前端配置：

const options = {
    xaxis: {
        categories: [2022, 2023] // 对应后端生成的$allYears数组
    }
};

const series = [
    // 非招标系列示例
    {
        name: 'Pengadaan Langsung - Barang',
        data: [9, 20] // 对应pengadaanNonTender['Pengadaan Langsung - Barang']
    },
    // 招标系列示例
    {
        name: 'Tender-Konstruksi',
        data: [11, 20] // 对应pengadaanTender['Tender-Konstruksi']
    }
];

关键优化点 #

• 移除原代码中冗余的$queryPengadaanNonTender->groupBy('pengadaan','tahun')：数据库查询已完成分组，集合层面重复分组会导致结构冗余。
• 统一x轴分类：确保所有系列的数据长度与年份数组一致，缺失年份补0，彻底避免图表渲染时的年份重复问题。

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