使用 laravel splade 在刀片文件中显示顶点图时遇到问题

Question

在刀片文件中显示顶点图时遇到问题 我看到了轴，但没有看到折线图，我正在使用 laravel splade 和 apex 图表，所以我应该能够看到折线图，但我看到一个空白图表，并且我确信已经正确完成了所有操作

在控制台中我看到 26Error: attribute x2: Expected length, "NaN".

我的控制器

<?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()
            ->addLine('Users', (array)array_values((array)$users))
            ->setXAxis(array_keys((array)$users))
            ->setTitle('All Users')
            ->toVue();

        return view('dashboard.index', [
            'chart' => $chart
        ]);
    }
}

我的刀片文件

<x-layout>
    <x-slot:header>
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{__('Users')}}
        </h2>
    </x-slot:header>

    <div class="py-12">
        <div class="max-w-7xl mx-auto px-8">
            <div class="bg-white shadow-xl rounded-lg p-4 space-y-4">
                <apexchart v-bind="@js($chart)"></apexchart>
            </div>
        </div>
    </div>

</x-layout>

我的app.js

import "./bootstrap";
import "../css/app.css";
import "@protonemedia/laravel-splade/dist/style.css";

import { createApp } from "vue/dist/vue.esm-bundler.js";
import { renderSpladeApp, SpladePlugin } from "@protonemedia/laravel-splade";

import VueApexCharts from "vue3-apexcharts";

const el = document.getElementById("app");

createApp({
    render: renderSpladeApp({ el })
})

    .use(VueApexCharts)
    .use(SpladePlugin, {
        "max_keep_alive": 10,
        "transform_anchors": false,
        "progress_bar": true
    })
    .mount(el);

我希望看到图表轴而不是折线图

Answer 1

这对我有用，我传递的是一个对象而不是数组或值

   $patientChart = Cholera::all()->pluck('id')->all();