Chart.js结合MySQL无法展示全部美国州人口数据问题求助

嘿，别担心，新手遇到这种问题太正常啦！我看了你的代码，马上就发现问题所在了——你在循环数据库结果的时候，是直接覆盖变量而不是把数据累加到列表里，所以最后只有Wyoming那条数据留下来了。

问题根源 #

你当前的循环逻辑是每次都用新数据替换变量值，而不是追加：

// 错误写法：每次循环都会覆盖之前的内容
$states = '"' . $row["state"] . '",';
$p2019 = '"' . $row["pop2019"] . '",';

这样循环结束后，变量里只会保留最后一行的记录。

修正方案 #

1. 修改PHP循环逻辑，拼接所有数据

把变量赋值改成追加模式（用.=代替=），最后再去掉末尾多余的逗号，避免Chart.js解析报错：

<?php 
include("conn.php"); 
$query = "SELECT * FROM usa_pop2"; 
$result = $conn->query($query); 
if (!$result) { 
    echo $conn->error; 
    exit(); 
} 
?>
<!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"> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
    <title>Charts</title> 
</head> 
<body> 
<?php 
// 初始化空字符串，用来拼接所有数据
$states = ""; 
$p2018 = ""; 
$p2019 = ""; 
$p2020 = ""; 

while ($row = $result->fetch_assoc()) { 
    // 使用 .= 追加内容，而不是覆盖
    $states .= '"' . $row["state"] . '",'; 
    $p2018 .= '"' . $row["pop2018"] . '",'; 
    $p2019 .= '"' . $row["pop2019"] . '",'; 
    $p2020 .= '"' . $row["pop2020"] . '",'; 
    echo "<p> $states - $p2018</p>"; 
} 

// 去掉末尾多余的逗号，避免Chart.js解析错误
$states = rtrim($states, ',');
$p2019 = rtrim($p2019, ',');
?> 
<div class="container"> 
    <h2>my data</h2> 
</div> 
<div class="container"> 
    <canvas id="myChart"></canvas> 
</div> 
<script> 
let myChart = document.getElementById('myChart').getContext('2d'); 

let popChart = new Chart(myChart, { 
    type: 'bar', 
    data: { 
        labels: [<?php echo $states; ?>], 
        datasets: [{ 
            label: 'Population 2019', 
            data: [<?php echo $p2019; ?>], 
            backgroundColor: '#581845', 
            borderWidth: 1, 
            hoverBorderWidth: 3, 
            hoverBorderColor: '#000' 
        }] 
    }, 
    options: { 
        // Chart.js 3.x版本中y轴写法改为scales.y，不再是yAxes
        scales: { 
            y: { 
                ticks: { 
                    beginAtZero: true 
                } 
            } 
        }, 
        tooltips: { 
            callbacks: { 
                label: function(tooltipItem) { 
                    return "€" + Number(tooltipItem.yLabel); 
                } 
            } 
        }, 
    } 
}); 
</script> 
</body> 
</html>

2. 额外调整：Chart.js版本兼容

你的代码里引用了Chart.js 3.x，但配置里还是用了旧版本的yAxes写法，我已经改成了3.x的scales.y，避免控制台报错。

这样修改之后，你的柱状图应该就能显示所有州的2019年人口数据啦！如果还有其他问题，随时提问～

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