我正在尝试使用 Chart.js 在离线模式下显示来自 MySQL 数据库的图表。我已经在运行 Ubuntu 的虚拟机 (VM Oracle) 上安装了 Chart.js 库，该虚拟机还托管了我的服务器和 MySQL 数据库。但是，当我尝试使用最新版本的 Chart.js (4.2.1) 时，我不断收到“未定义图表”的错误消息。
Uncaught ReferenceError: Chart is not defined http://localhost/affichage_graph.php:27
在尝试了各种解决方案后，例如使用本地文件路径而不是 CDN 链接，并确保我的脚本正确链接到 Chart.js 文件，我仍然无法让它工作。
但是，我通过降级到旧版本的 Chart.js (3.9.1) 找到了解决方案，现在它可以完美运行了。
我很好奇为什么最新版本的 Chart.js 在这种特殊情况下不适合我。有没有其他人遇到过类似的问题，有没有人对这种行为有解释？
这是我的 PHP/HTML 代码：
<!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>Graphique Poids</title>
<script src="/chart.js-3.9.1/package/dist/chart.min.js"></script>
</head>
<body>
<div style = "width: 1500px;">
<canvas id="myChart"></canvas>
</div>
<?php
/*if (file_exists('chart.js-3.9.1/package/dist/chart.js')) {
echo "le fichier existe";
} else {
echo "le fichier n'existe pas";
}*/
$con = new mysqli('localhost', 'root', '', 'db_esp32');
$query = $con->query("SELECT * FROM tbl_poids");
foreach($query as $data)
{
$tps[]=$data['id'];
$poids[] = $data['poids_value'];
}
?>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const labels = <?php echo json_encode($tps) ?>;
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Poids',
data: <?php echo json_encode($poids) ?>,
borderWidth: 2,
borderColor: 'red', // définir la couleur de la bordure de la ligne
backgroundColor: 'rgba(255, 0, 0, 0.2)' // définir la couleur de remplissage
}]
},
options: {
scales: {
y: {
label: 'id',
beginAtZero: true
}
}
}
});
const config = {
type: 'line',
data,
options: {
scales: {
x: {
backgroundColor: [
"red"
]
}
}
}
};
</script>
</body>
</html>