Chart.js图表失效：labeldeMes与datosdeMes未定义问题求助

错误根源 #

控制台提示变量未定义，本质是前端JS代码执行时，labeldeMes和datosdeMes这两个变量尚未被定义或无法访问，核心原因是后端数据未正确传递到前端，或代码加载顺序错误。

排查与修复步骤 #

1. 确保后端PHP正确生成并输出变量 #

在index.php中，先完成2021年各月患者数的查询，再将结果转换为前端可识别的全局变量：

// 数据库连接（替换为你的数据库信息）
$conn = new mysqli('localhost', '数据库用户名', '数据库密码', '数据库名');

// 查询2021年各月患者总数，按月份排序
$sql = "SELECT MONTH(fecha_registro) AS mes, COUNT(*) AS total 
        FROM pacientes 
        WHERE YEAR(fecha_registro) = 2021 
        GROUP BY mes 
        ORDER BY mes";
$result = $conn->query($sql);

// 初始化月份标签和数据数组
$labeldeMes = [];
$datosdeMes = [];
$mesesMap = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];

while($row = $result->fetch_assoc()){
    $labeldeMes[] = $mesesMap[$row['mes'] - 1]; // 转换为中文月份
    $datosdeMes[] = $row['total'];
}

// 将PHP数组转为JSON，输出为前端全局变量
echo "<script>
        var labeldeMes = ".json_encode($labeldeMes).";
        var datosdeMes = ".json_encode($datosdeMes).";
      </script>";

2. 调整代码加载顺序 #

在footer.php中，必须保证后端输出的变量脚本先于Chart.js库和自定义charts.js加载：

<!-- 先输出后端生成的全局变量 -->
<script>
var labeldeMes = <?php echo json_encode($labeldeMes); ?>;
var datosdeMes = <?php echo json_encode($datosdeMes); ?>;
</script>

<!-- 再引入Chart.js库 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- 最后加载自定义图表逻辑 -->
<script src="charts.js"></script>

3. 检查charts.js中的变量使用 #

确保charts.js中使用的变量名与后端输出完全一致，且依赖的canvas元素存在：

// charts.js 初始化代码
const ctx = document.getElementById('patientChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labeldeMes,
        datasets: [{
            label: '2021年各月患者总数',
            data: datosdeMes,
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                title: { display: true, text: '患者数量' }
            },
            x: {
                title: { display: true, text: '月份' }
            }
        }
    }
});

同时在index.php的HTML结构中添加对应的canvas容器：

<canvas id="patientChart" width="600" height="300"></canvas>

4. 额外排查点 #

• 确认数据库查询返回结果：执行上述SQL语句，检查是否有2021年的患者数据，空数组不会导致变量未定义，但会显示空图表。
• 检查变量名拼写：前后端变量名必须完全一致（比如labeldeMes不能写成labelDeMes）。
• 确认PHP变量作用域：如果$labeldeMes和$datosdeMes是在函数内部定义的，需确保它们能传递到输出变量的代码块中。

内容的提问来源于stack exchange，提问作者user287003