如何在 Laravel 中使用 Highcharts 创建多系列柱状图-php教程-PHP中文网

如何在 Laravel 中使用 Highcharts 创建多系列柱状图

本文详解如何在 laravel 项目中正确配置 highcharts，实现按产品类别分组的多系列（多数据集）柱状图，解决因数据结构不匹配导致图表渲染失败的问题。

本文详解如何在 laravel 项目中正确配置 highcharts，实现按产品类别分组的多系列（多数据集）柱状图，解决因数据结构不匹配导致图表渲染失败的问题。

在 Laravel 中集成 Highcharts 实现多系列柱状图时，常见错误源于后端数据组织方式与前端 Highcharts API 要求不一致：Highcharts 的 series 数组需包含多个对象，每个对象代表一个数据系列（如不同产品类别的月度销量），且每个系列的 data 必须是与 X 轴月份严格对齐的数值数组。而原代码中仅用 pluck() 获取单一维度数据，无法支撑多系列结构，导致图表显示异常（如所有数据堆叠在同一柱子或空白）。

✅ 正确的数据组织方式

后端应一次性查询各分类在各月份的聚合数据，并按「月份」分组，为每个系列预留独立字段。例如，若需展示三个产品类别的月度销售总额，可使用 DB::raw() 构建带别名的聚合字段：

// app/Http/Controllers/DashboardController.php
public function index()
{
    // 按月份分组，同时计算每个类别的总销售额（此处以 category_id 区分，实际请按业务逻辑调整）
    $monthlyData = DB::table('orders')
        ->select(
            DB::raw("MONTHNAME(created_at) as bulan"),
            DB::raw("SUM(CASE WHEN category_id = 1 THEN total ELSE 0 END) as electronics"),
            DB::raw("SUM(CASE WHEN category_id = 2 THEN total ELSE 0 END) as clothing"),
            DB::raw("SUM(CASE WHEN category_id = 3 THEN total ELSE 0 END) as books")
        )
        ->whereYear('created_at', date('Y')) // 可选：限定当前年份
        ->groupBy(DB::raw("MONTH(created_at)"), 'bulan')
        ->orderBy('bulan', 'ASC') // 确保月份顺序正确（Jan→Dec）
        ->get();

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

⚠️ 注意：MONTHNAME() 返回英文月份名（如 'January'），若需中文，请改用 DATE_FORMAT(created_at, '%m月') 或本地化处理；同时务必 ORDER BY 保证月份顺序，否则 X 轴将错乱。

Laravel 13.2.0
PHP中文网提供Laravel 13.2.0版本下载，Laravel框架是基于 PHP 8.3+ 的高性能框架，官方推荐通过 Composer 安装。它内置 AI SDK、JSON:API Resources 及原生向量搜索，支持属性驱动开发与队列路由，大幅提升开发效率。相比旧版，13.2.0 优化了缓存 TTL 管理与实时通信，无需 Redis 即可横向扩展。作为现代 Web 开发首选，它兼顾安全与极速体验，助您快速构建企业级应用。

下载

✅ 前端 Highcharts 配置要点

在 Blade 模板中，通过 PHP 循环动态生成 Highcharts 所需的 categories 和各 series.data：

<!-- resources/views/admin/dashboard.blade.php -->
<figure class="highcharts-figure"><div id="container" style="height: 400px;"></div>
</figure>

@push('scripts')
<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>
Highcharts.chart('container', {
    chart: { type: 'column' },
    title: { text: '各产品类别月度销售额' },
    xAxis: {
        categories: [
            @foreach($monthlyData as $item)
                '{{ $item->bulan }}',
            @endforeach
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: { text: '销售额 (¥)' }
    },
    tooltip: {
        shared: true,
        useHTML: true,
        headerFormat: '<b>{point.key}<br/>',
        pointFormat: '{series.name}: <b>{point.y:.2f} ¥<br/>'
    },
    plotOptions: {
        column: {
            pointPadding: 0.1,
            borderWidth: 0
        }
    },
    series: [
        {
            name: '电子产品',
            data: [
                @foreach($monthlyData as $item)
                    {{ $item->electronics ?? 0 }},
                @endforeach
            ]
        },
        {
            name: '服装',
            data: [
                @foreach($monthlyData as $item)
                    {{ $item->clothing ?? 0 }},
                @endforeach
            ]
        },
        {
            name: '图书',
            data: [
                @foreach($monthlyData as $item)
                    {{ $item->books ?? 0 }},
                @endforeach
            ]
        }
    ],
    credits: { enabled: false }
});
</script>
@endpush

? 关键注意事项

数据对齐性：X 轴 categories 与每个 series.data 的长度必须完全一致，且顺序一一对应。使用 groupBy + orderBy 是保障顺序的基础。
空值处理：数据库中某月某类别无数据时，SUM(...) 返回 NULL，前端会报错。务必使用 ?? 0 提供默认值。
性能优化：避免在 Blade 中嵌套复杂逻辑。如数据量大，建议在控制器中预处理为标准数组格式（如 ['categories' => [...], 'series' => [...]），再 json_encode 传递给前端。
响应式适配：添加 responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal' } } }] } 提升移动端体验。

通过以上结构化数据准备与精准的 Highcharts 配置，即可成功渲染出类似东京、伦敦等多城市对比的多系列柱状图——只不过您的图中将是「电子产品」「服装」「图书」等真实业务类别，清晰呈现各品类在时间维度上的表现差异。