Laravel Livewire表单提交后Chart.js图表无法渲染的问题求助

我现在在尝试用Chart.js和Laravel Livewire来展示一个或多个图表，但遇到了棘手的问题：图表始终渲染不出来，虽然我用console.log(chart)打印的时候，能看到图表对象已经拿到了正确的数据。

我现在甚至都没去对接真实的表单数据，就连用假数据渲染图表都搞不定——在引入Livewire之前，假数据渲染图表是完全正常的。

下面是我的相关代码：

filter-graphs.blade.php（筛选视图） #

<div>
    <form wire:submit="onGraphsChange" class="text-xl w-3/4 mx-auto">
        <div class="flex items-center justify-center">
            <div class="mx-4 flex-1 justify-center">
                <x-input-label for="graphs" value="Graphs à afficher" />
                <select id="graphs" name="graphs" multiple="multiple" class="mt-1 block w-full py-2 bg-gray-200 text-gray-800 rounded focus:border-[#F73F3A] focus:ring-[#F73F3A]">
                    <option class="py-1 bg-gray-200 text-gray-800" value="4">dummy 1</option>
                    <option class="py-1 bg-gray-200 text-gray-800" value="2">dummy 2</option>
                </select>
            </div>
            <div class="mx-4 flex-1 justify-center text-center">
                <button type="submit" class="px-4 py-2 border-2 border-gray-800 text-gray-800 rounded hover:text-gray-200 hover:bg-gray-800 hover:cursor-pointer">Afficher les graphs</button>
            </div>
        </div>
    </form>
</div>

FilterGraphs.php（筛选组件） #

namespace App\Livewire;

use Livewire\Component;

class FilterGraphs extends Component
{
    public $selectedGraphs = null;

    public function onGraphsChange()
    {
        $this->dispatch('graphs-selected', $this->selectedGraphs);
    }

    public function render()
    {
        return view('livewire.filter-graphs');
    }
}

display-graphs.blade.php（图表展示视图） #

<div class="flex">
    <div class="flex-1 shadow-sm rounded-lg bg-white m-4 p-4">
        <canvas id="test-graph"></canvas>
    </div>
</div>

<script>
    document.addEventListener('livewire:init', () => {
        Livewire.on('updateGraphs', (data) => {
            if(Chart.getChart("test-graph"))
                Chart.getChart("test-graph").destroy();

            var ctx = document.getElementById('test-graph').getContext("2d");
            var config = {
                type: 'line',
                data: {
                    labels: data[0]['labels'],
                    datasets: data[0]['datasets']
                },
                options: {
                    scales: {
                        x: {
                           ticks: {
                                display: false
                            },
                            grid: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: '',
                        }
                    },
                    animation: false
                }
            };

            // myChart.config.options.plugins.title.text = data['title'];
            var myChart = new Chart(ctx, config);
        });
    });
</script>

DisplayGraphs.php（图表展示组件） #

namespace App\Livewire;

use Livewire\Component;

use App\Models\History;

class DisplayGraphs extends Component
{
    public array $datasets = [];
    public array $labels = [];
    public $graphs;

    protected $listeners = [
        'graphs-selected' => 'graphsSelected',
    ];

    public function graphsSelected($server_service_ids)
    {
        //Get the dummy data

        $labels = $dates; // Contains an array of 85 dates as strings

        $datasets = [
            [
                'label' => 'Temps de réponse (ms)',
                'backgroundColor' => 'rgba(247, 63, 58, 0.3)',
                'borderColor' => 'rgb(247, 63, 58)',
                'lineTension' => 0.5,
                'pointRadius' => 2,
                'fill' => true,
                'data' => $response_times, // Contains an array of 85 int
            ],
            [
                'label' => 'Niveau d\'alerte (ms)',
                'backgroundColor' => 'rgba(255, 87, 34, 0.3)',
                'borderColor' => 'rgb(255, 87, 35)',
                'pointRadius' => 0,
                'data' => $alert, // Contains an array of 85 int
            ],
        ];

        $this->dispatch('updateGraphs', [
            'datasets' => $datasets,
            'labels' => $labels,
        ]);
    }

    public function mount()
    {
        $this->labels = [];
        $this->datasets = [];
    }

    public function render()
    {
        return view('livewire.display-graphs');
    }
}

承载所有组件的父视图 #

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            Title
        </h2>
    </x-slot>

    <!--Tabs navigation-->
    @include('partials.subnavigation-tabs')

    <livewire:filter-graphs />
    <livewire:display-graphs />
</x-app-layout>

我到底漏掉了什么才能让图表正常显示呢？提前感谢各位的帮助！

备注：内容来源于stack exchange，提问作者Fluktegrute