Chart.js折线图通过PHP从MySQL获取数据时消失的问题求助

各位大佬好，我刚接触Web开发没多久，最近在用Chart.js做折线图的时候遇到了个奇怪的问题：手动写死数据的时候图表显示完全正常，但一改成从MySQL数据库拉取数据，图表就直接消失了，而且浏览器控制台连个报错都没有，我实在找不到问题出在哪。先提前说下我的代码可能写得有点乱，麻烦大家多担待！

我试过参考其他项目的写法修改SQL查询语句，但好像没完美适配到我的项目里，现在就想解决这个问题，让图表能正常从MySQL读取并展示数据。

以下是我的完整代码：

PHP 初始化与页面头部 #

<?php
include('./connection.php');
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nisantasi Cafe</title>
    <link rel="stylesheet" type="text/css" href="grafic1.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
</head>

Chart.js 数据配置脚本 #

<script>
const labels = [
    '2022-01-01',
    '2022-02-01',
    '2022-03-01',
    '2022-04-01',
    '2022-05-01',
    '2022-06-01',
    '2022-07-01',
    '2022-08-01',
    '2022-09-01',
    '2022-10-01',
    '2022-11-01',
    '2022-12-01',
];

const data = {
    labels: labels,
    datasets: [{
        label: 'Bitcoin',
        backgroundColor: 'transparent',
        borderColor: 'rgb(255, 0, 255)',
        data: [<?php
            include("/connection.php");
            $sql = "SELECT birim_deger.karsilik, tarih.tarih FROM birim_deger, tarih_deger, tarih
            WHERE birim_deger.deger_id=tarih_deger.deger_id AND tarih_deger.tarih_id=tarih.tarih_id AND birim_deger.coin_id=2 AND birim_deger.itibari_id=1;";
            $result = $con->query($sql);
            $data = array();
            foreach($result as $row){
                $data[] = $row;
            }
            print json_encode($data)
        ?>],
    }]
};

const config = {
    type: 'line',
    data: data,
    options: {}
};
</script>

页面主体与交互脚本 #

<body>
    <div class="container">
        <div class="navigation">
            <ul>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-people-arrows"></i></span>
                        <span class="title"><h2>NCS</h2></span>
                    </a>
                </li>
                <li>
                    <a href="admin.php">
                        <span class="icon"><i class="fas fa-home"></i></span>
                        <span class="title">Ana Sayfa</span>
                    </a>
                </li>
                <li>
                    <a href="grafic.php">
                        <span class="icon"><i class="fas fa-chart-line"></i></span>
                        <span class="title">Broşürcü</span>
                    </a>
                </li>
                <li>
                    <a href="grafic1.php">
                        <span class="icon"><i class="fas fa-chart-line"></i></span>
                        <span class="title">Fal Dağılımı</span>
                    </a>
                </li>
                <li>
                    <a href="grafic2.php">
                        <span class="icon"><i class="fas fa-chart-line"></i></span>
                        <span class="title">Falcı</span>
                    </a>
                </li>
                <li>
                    <a href="grafic3.php">
                        <span class="icon"><i class="fas fa-chart-line"></i></span>
                        <span class="title">Toplam Fal</span>
                    </a>
                </li>
                <li>
                    <a href="index.php">
                        <span class="icon"><i class="fas fa-signout-alt"></i></span>
                        <span class="title">Çıkış Yap</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main">
            <div class="topbar">
                <div class="toggle" onclick="toggleMenu();"></div>
                <div class="search">
                    <label></label>
                </div>
                <div class="user"></div>
            </div>
            <div class="chart-container" style="background:transparent;display:inline-block; text-align:center; height:90vh; width:120vh; position:absolute;left:15%;top:10%;">
            </div>
            <div class="chart-container" style="background:transparent;display:inline-block; text-align:center; height:90vh; width:120vh; position:absolute;left:5%;top:10%;">
                <div class="selectBox">
                    <select id="coincesit">
                        <option value="566,641,591,629">Bitcoin</option>
                        <option value="466,341,491,529">Ethereum</option>
                        <option value="666,541,791,529">BNB</option>
                        <option value="xrp">Ripple</option>
                        <option value="doge">Dogecoin</option>
                        <option value="ada">Cardano</option>
                        <option value="Sol">Solana</option>
                        <option value="trx">TRON</option>
                        <option value="avax">Avalanche</option>
                        <option value="ltc">Litecoin</option>
                    </select>
                </div>
                <label for="myChart1">Token Analizi</label>
                <canvas id="myChart1"></canvas>
            </div>
        </div>
    </div>

    <script>
        function toggleMenu() {
            let toggle = document.querySelector('.toggle');
            let navigation = document.querySelector('.navigation');
            let main = document.querySelector('.main');
            toggle.classList.toggle('active');
            navigation.classList.toggle('active');
            main.classList.toggle('active');
        }
    </script>

    <script>
        const coincesit = document.getElementById('coincesit');
        coincesit.addEventListener('change',cointracker);

        function cointracker(){
            const label = coincesit.options[coincesit.selectedIndex].text;
            myChart1.data.datasets[0].label = label;
            console.log(myChart1.data.datasets[0].data = coincesit.value.split(','));
            myChart1.update();
        }

        const myChart1 = new Chart(document.getElementById('myChart1'), config);
    </script>
</body>
</html>

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