当存在另一条现有图形线时，为什么图形点不连接在一起？

Question

你好，我正在使用 ChartJs 制作一个图形，该图形使用 laravel 从 API 获取其值。我有一个问题，如果我有超过 1 条图形线，其他图形点将不会相互连接形成线。

这是我的

blade

代码：

    <div class="graph">
            <form>
                @csrf
            <label for="startdate">Start Date</label>
            <input type="date" name="startdate" id="startdate"/>
            <label for="enddate">End Date</label>
            <input type="date" name="enddate" id="enddate"/>
            <input type="submit" value="Shfaq vlerat">
            </form>
        <div class="card text-center m-5">
            <div class="card-header">
                <h2>Currency Outlay</h2>
            </div>
            <canvas id="myChart" ></canvas>
        </div>

<script>

    var albanianLek = [], americanDollar = [], euro = [], britishPound = [], created_date = []

    async function dummyChart() {
        await getData()

        const ctx = document.getElementById('myChart').getContext('2d');

        const chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'line',

            // The data for our dataset
            data: {
                labels: created_date,
                datasets: [{
                    label: 'ALL',
                    borderColor: 'rgb(255, 0, 0)',
                    data: albanianLek
                },
                    {
                        label: 'GBP',
                        borderColor: 'rgb(0, 153, 153)',
                        data: britishPound
                    },

                    {
                        label: 'USD',
                        borderColor: 'rgb(0, 153, 0)',
                        data: americanDollar
                    },

                    {
                        label: 'EUR',
                        borderColor: 'rgb(0, 0, 255)',
                        data: euro
                    },

                ]
            },

            // Configuration options go here
            options: {
                tooltips: {
                    mode: 'index'
                }
            }
        })}

    dummyChart()


    //Fetch Data from API

    async function getData() {
        const apiUrl = "http://127.0.0.1:8000/api/outlay";

        const response = await fetch(apiUrl)

        const barChatData = await response.json()

        const ALL = barChatData[0].map((item) => {
            return item.value_with_currencies.ALL;
        })

        const USD = barChatData[0].map((item) => {
            return item.value_with_currencies.USD;
        })

        const EUR = barChatData[0].map((item) => {
            return item.value_with_currencies.EUR;
        })

        const GBP = barChatData[0].map((item) => {
            return item.value_with_currencies.GBP;
        })

        const date = barChatData[0].map((item) => {
            return item.updated_at;
        })

        albanianLek = ALL
        britishPound = GBP
        americanDollar = USD
        euro = EUR
        created_date = date
    }
</script>

这是我的

api.php

代码：

Route::get('outlay/{startdate?}/{enddate?}',[GetValuesController::class,'getOutlays']);

这是我的

Controller

代码：

 function getOutlays(Request $request)
    {
        $startdate = $request->startdate;
        $enddate = $request->enddate;

        if($startdate == null && $enddate == null)
        {
            $values = response()->json([OutlayResource::collection(Outlay::where("status", Status::CONFIRMED_BY_EMPLOYEE)->orderBy('updated_at', 'asc')->get())], 200);
        }
        else
        {
            $values = response()->json([OutlayResource::collection(Outlay::where("status", Status::CONFIRMED_BY_EMPLOYEE)->whereBetween("updated_at", [$startdate, $enddate])->orderBy('updated_at', 'asc')->get())], 200);
        }

        return $values;
    }

这就是图形现在的样子：

如您所见，红色图表运行良好，但显示了 2 个绿点，但 not 连接，如果移除红色图表，绿点将连接。我有另一个

api

，其中包括姓名、年龄和薪水，它与

blade

中的图形相同，并且工作正常，这就是它的显示方式：

知道为什么会这样吗？