Chart.js本地正常线上失效问题排查求助

Chart.js图表在本地localhost环境运行完全正常，但部署到线上环境后无法显示（柱状图加载失败）。已尝试更换CDN引入地址<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>，但问题仍未解决。

相关代码如下：

$con = new mysqli('localhost','root','','evaluatordb');
$query = $con->query("
SELECT strand, COUNT(*) as total
FROM rank
GROUP BY strand;
");

$strand = [];
$total = [];
foreach($query as $data)
{
    $strand[] = $data['strand'];
    $total[] = $data['total'];
}
?>
<select onchange="location = this.value;">
<option value="superadmin.php?q=12">Strand</option>
<option value="superadmin.php?q=10">Gender</option>
<option value="superadmin.php?q=11">Age</option>
</select>

<canvas id="myChart3"></canvas>
</div>
}

<script>
// === include 'setup' then 'config' above ===
const labels = <?php echo json_encode($strand) ?>;
const data = {
    labels: labels,
    datasets: [{
    label: 'Strand',
    data: <?php echo json_encode($total) ?>,
    backgroundColor: [
        'rgba(255, 99, 132, 0.5)',
        'rgba(255, 159, 64, 0.5)',
        'rgba(255, 205, 86, 0.5)',
        'rgba(75, 192, 192, 0.5)',
        'rgba(54, 162, 235, 0.5)',
        'rgba(153, 102, 255, 0.5)',
        'rgba(201, 203, 207, 0.5)'
    ],
    borderColor: [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
    ],
    borderWidth: 2
    }]
};

const config = {
    type: 'bar',
    data: data,
    options: {
    scales: {
        y: {
        beginAtZero: true
        }
    }
    },
};

var myChart = new Chart(
    document.getElementById('myChart3'),
    config
);
</script>

排查与解决方法 #

• 修正数据库连接配置
  线上服务器的数据库信息和本地完全不同，代码里的localhost、root、空密码、evaluatordb都是本地配置，必须替换成线上服务商提供的数据库主机地址、用户名、密码、数据库名称。

• 开启错误调试
  线上环境通常默认关闭错误显示，先开启PHP错误提示，在代码最顶部添加：

  error_reporting(E_ALL);
  ini_set('display_errors', 1);
  

  同时按下F12打开浏览器开发者工具，查看Console面板的JS报错信息——比如Chart.js是否加载成功、labels或data是否为空导致图表无法渲染。

• 确保数据查询正常
  检查线上数据库的rank表是否存在，strand字段是否和本地一致；可以在PHP代码中添加var_dump($strand, $total);，查看是否从数据库获取到了有效数据，若线上无数据，图表自然无法显示。

• 修复变量初始化问题
  如果数据库查询无结果，$strand和$total会变成未定义变量，导致JS语法错误。提前初始化这两个数组：

  $strand = [];
  $total = [];
  foreach($query as $data) {
      $strand[] = $data['strand'];
      $total[] = $data['total'];
  }
  

• 保证JS执行时机正确
  确保Chart.js的CDN脚本在自定义JS代码之前加载，比如把CDN放在<head>标签内；或者将图表初始化代码包裹在DOM加载完成事件中，避免DOM元素未加载就执行JS：

  document.addEventListener('DOMContentLoaded', function() {
      const labels = <?php echo json_encode($strand); ?>;
      // 其余data、config定义和图表初始化代码
      var myChart = new Chart(document.getElementById('myChart3'), config);
  });
  

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