Laravel中使用Highcharts实现多系列柱状图失败问题求解

你当前代码存在以下几个核心问题，导致无法渲染出预期的多系列柱状图：

• 后端查询逻辑未做分类与月份的关联分组，无法获取每个分类对应各月份的统计值，且引入了完全无用的PHPUnit\TextUI\XmlConfiguration\Group类
• 月份查询未做排序，会导致x轴月份显示顺序混乱，且无数据的月份会直接缺失
• 前端存在变量名不匹配、配置项拼写错误：后端传递的月份变量名为$bulan，前端错误使用month变量接收；x轴配置项categories拼写为caegories导致月份无法正常渲染
• Highcharts 多系列柱状图的series配置格式错误：多系列要求每个产品分类对应一个独立的series对象，包含分类名称和按x轴顺序排列的数值数组，原代码将全部分类名数组传入单个series的name字段，完全不符合多系列渲染要求
• Blade模板语法错误：@section('javascript')块被嵌套在@section('content')内部，会导致脚本块渲染位置异常

1. 控制器代码修正 #

直接替换原有控制器方法逻辑，代码会自动按分类、月份组装符合Highcharts要求的格式，无数据的月份自动补0，避免缺项：

<?php

namespace App\Http\Controllers;

use App\Models\Category;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class DashboardController extends Controller
{
    public function index()
    {
        // 获取所有产品分类
        $categories = Category::select('id', 'name')->orderBy('id')->get();
        // 固定12个月份列表，保证x轴顺序正确、无缺项
        $months = collect([
            'January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December'
        ]);
        // 按分类、月份分组统计当年数据，可按需修改whereYear条件统计指定年份
        $stats = Category::select(
                DB::raw('MONTH(created_at) as month_num'),
                DB::raw('SUM(total) as total')
            )
            ->whereYear('created_at', date('Y'))
            ->groupBy('id', 'month_num')
            ->get()
            ->groupBy('id');
        // 组装Highcharts要求的series格式
        $series = $categories->map(function ($category) use ($months, $stats) {
            $categoryMonthData = $stats->get($category->id, collect());
            $data = $months->map(function ($month, $index) use ($categoryMonthData) {
                $currentMonthNum = $index + 1;
                $record = $categoryMonthData->firstWhere('month_num', $currentMonthNum);
                return $record ? (float)$record->total : 0;
            });
            return [
                'name' => $category->name,
                'data' => $data->toArray()
            ];
        })->toArray();

        return view('admin.dashboard', compact('months', 'series'));
    }
}

如果你的统计数据不是存在Category表，而是在订单表、销售记录表等其他数据表，只需替换上述统计逻辑使用的模型、分类关联字段即可，series组装逻辑无需修改。

2. 前端Blade代码修正 #

修正模板嵌套问题、拼写错误，直接使用后端组装好的配置数据渲染图表：

@section('content')
<h1 class="gray">Dashboard</h1>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        柱状图展示各产品分类月度数据对比，悬停可查看具体数值，支持导出图片、数据表格。
    </p>
</figure>
@endsection

@section('javascript')
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<script type="text/javascript">
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '各分类月度数据统计' // 可自定义修改标题
    },
    subtitle: {
        text: '数据来源：系统后台' // 可自定义修改副标题
    },
    xAxis: {
        categories: @json($months),
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: '统计数值' // 可自定义修改y轴名称，如销量、销售额
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: @json($series)
});
</script>
@endsection

修正后即可渲染出和示例效果一致的多系列柱状图，每个产品分类对应一个独立的柱形系列，x轴按1-12月顺序排列。

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