Laravel Splade中Blade文件Apex Chart折线图不显示问题求助

核心原因 #

控制台出现的Error: attribute x2: Expected length, "NaN"错误，本质是你传给Apex Charts的不是有效数值数据——原代码直接把User模型对象转成数组传入，图表无法从模型对象中解析出可用于绘制折线的数值，导致坐标轴能渲染但折线空白。

修复步骤 #

1. 修正Controller的数据处理逻辑 #

折线图需要明确的数值数组（Y轴）和标签数组（X轴），你需要根据业务需求提取对应的数据：

示例1：按日期统计用户注册数量（常见场景）

<?php

namespace App\Http\Controllers;

use App\Models\User;
use ArielMejiaDev\LarapexCharts\LarapexChart;

class DashboardController extends Controller
{
    public function index()
    {
        // 按注册日期分组统计用户数
        $userStats = User::selectRaw('DATE(created_at) as register_date, COUNT(*) as user_count')
            ->groupBy('register_date')
            ->orderBy('register_date')
            ->get();

        $chart = (new LarapexChart)
            ->lineChart()
            // Y轴：用户数量（纯数值数组）
            ->addLine('新增用户', $userStats->pluck('user_count')->toArray())
            // X轴：注册日期（标签数组）
            ->setXAxis($userStats->pluck('register_date')->toArray())
            ->setTitle('用户增长趋势')
            ->toVue();

        return view('dashboard.index', compact('chart'));
    }
}

示例2：展示用户的某个数值字段（如用户积分）

<?php

namespace App\Http\Controllers;

use App\Models\User;
use ArielMejiaDev\LarapexCharts\LarapexChart;

class DashboardController extends Controller
{
    public function index()
    {
        $users = User::all();

        $chart = (new LarapexChart)
            ->lineChart()
            // Y轴：用户积分（假设User模型有score字段）
            ->addLine('用户积分', $users->pluck('score')->toArray())
            // X轴：用户名作为标签
            ->setXAxis($users->pluck('name')->toArray())
            ->setTitle('用户积分分布')
            ->toVue();

        return view('dashboard.index', compact('chart'));
    }
}

2. 原代码问题解析 #

你之前的代码中：

->addLine('Users', (array)array_values((array)$users))

这段代码把整个User模型对象转成了数组，每个元素包含模型的所有属性（如id、name、created_at等），并非单一数值，Apex Charts无法识别这种结构，因此解析出NaN，导致折线无法渲染。

验证要点 #

• 确保addLine的第二个参数是纯数值数组（如[10, 20, 30]）
• 确保setXAxis的参数是字符串/日期类型的标签数组（如['2024-01-01', '2024-01-02']）

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