PHP连接数据库画柱状图步骤详解

本文深入解析了使用PHP连接MySQL数据库并结合Chart.js绘制柱状图的完整链路，直击开发者在实践中最常卡壳的三大痛点：数据库连接失败（根源常在于服务状态、用户权限或host配置错误）、数据格式转换失当（必须用mysqli_fetch_assoc转为关联数组再json_encode，避免编码与键名冲突），以及前后端联调障碍（fetch请求配置、CORS跨域、JSON结构校验及线上500错误的高效排查方法），提供可直接复用的健壮代码片段和精准排错路径，助你绕过90%的“看似代码问题、实为环境陷阱”的弯路。

PHP 连 MySQL 失败的常见报错和直连写法

多数人卡在第一步：连不上数据库，直接报 PDOException 或 mysqli_connect(): Connection refused。不是代码写错，而是忽略了 MySQL 服务状态、用户权限、host 配置这三块。

用 mysqli 直连最不容易绕弯子：

$conn = mysqli_connect('127.0.0.1', 'root', 'password', 'mydb', 3306);
if (!$conn) {
    die('连接失败：' . mysqli_connect_error());
}

• 127.0.0.1 比 localhost 更可靠（避免 socket 路径问题）
• 端口显式写上 3306，尤其 Docker 或自定义端口时
• 确保 MySQL 用户有远程访问权限（CREATE USER 'user'@'%' IDENTIFIED BY 'pwd'; GRANT SELECT ON mydb.* TO 'user'@'%'; FLUSH PRIVILEGES;）

查出数据后怎么转成图表能用的 JSON 格式

前端图表库（如 Chart.js）只认标准 JSON 数组，不是 PHP 数组。很多人用 json_encode($result) 直接输出，结果是空数组或报错——因为没把 MySQL 结果集真正转成 PHP 索引数组。

正确做法：

$sql = "SELECT category, SUM(amount) as total FROM sales GROUP BY category";
$result = mysqli_query($conn, $sql);
$data = [];
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}
echo json_encode($data);

• 必须用 mysqli_fetch_assoc()，不能用 mysqli_fetch_array()（否则键名重复，JSON 里字段乱）
• 如果字段含中文或特殊字符，确保数据库、连接、PHP 文件三者都是 utf8mb4 编码（连接后加 mysqli_set_charset($conn, 'utf8mb4');）
• 别在 json_encode() 前 echo 其他内容，否则 JSON 解析失败

Chart.js 柱状图怎么接 PHP 输出的 JSON

前端拿不到数据，往往不是后端没吐，而是 AJAX 请求没配对。Chart.js 本身不处理异步，得自己 fetch。

HTML 中这样写：

<canvas id="barChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
fetch('get_data.php')
  .then(res => res.json())
  .then(data => {
    const labels = data.map(item => item.category);
    const values = data.map(item => item.total);
    new Chart(document.getElementById('barChart'), {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          label: '销售额',
          data: values,
          backgroundColor: '#4e73df'
        }]
      }
    });
  });
</script>

• get_data.php 必须只输出 JSON，不能有 echo "debug"; 或 HTML
• 注意 CORS：如果前端和 PHP 不在同一域名下，需在 get_data.php 开头加 header('Access-Control-Allow-Origin: *');
• Chart.js v4 要求 data.labels 和 data.datasets[0].data 长度一致，否则柱子错位或空白

为什么本地能跑线上报 500？查错误日志比改代码快

线上环境默认关闭 PHP 错误显示，json_encode 出错、SQL 权限不足、内存超限……全变成白屏或 500。别猜，看日志。

• 查 PHP 错误日志路径：php -i | grep 'error_log'，通常在 /var/log/php_errors.log 或 /usr/local/var/log/php/php_error.log
• 临时打开错误显示（仅调试）：ini_set('display_errors', '1'); error_reporting(E_ALL); 放在 get_data.php 开头
• MySQL 查询慢？在 SQL 前加 EXPLAIN 看执行计划，重点看是否用了索引、有没有 Using filesort

图表动不了，八成不是 JS 写错，而是后端 JSON 格式不对或根本没返回——先 curl 测接口：curl -v http://yoursite.com/get_data.php，看响应体和状态码。

今天关于《PHP连接数据库画柱状图步骤详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！