Chart.js从SQL数据库读取数据生成折线图失败问题咨询

• 数据类型转换问题：绝大多数情况是未将AJAX拿到的JSON字符串转成JS对象。如果用原生XMLHttpRequest，需要用JSON.parse(xhr.responseText)处理返回值；如果用jQuery的$.ajax，要确认配置了dataType: 'json'，否则返回值会被当作字符串处理，Chart.js无法识别字符串格式的数组。
• 异步执行时序问题：固定值可以正常渲染的核心原因是同步定义可用，AJAX是异步操作，大概率你是在请求还没返回结果时就执行了Chart初始化逻辑，必须把Chart初始化的代码全部放到AJAX的成功回调函数内，或是用Promise/async await等待异步请求完成后再初始化图表。

错误写法示例：

let chartData = []
$.get('data.php', res => { chartData = res })
// 执行初始化时chartData还是空数组
new Chart(ctx, { data: { datasets: [{ data: chartData }] } })

正确写法示例：

$.get('data.php', res => {
  // 所有Chart初始化逻辑放在回调内部
  new Chart(ctx, { data: { datasets: [{ data: res }] } })
})

• 数据格式匹配问题：检查接口返回的JSON结构和写死的固定值结构是否完全一致，比如数值是否被误转为字符串（"123"和123的差异）、数组维度是否匹配、字段名大小写是否完全对应（比如后端返回value前端调用Value）。
• 响应头配置问题：确认data.php返回的响应头Content-Type为application/json，否则部分浏览器会将返回值识别为普通文本导致解析失败。PHP侧可以在输出JSON前加一行header('Content-Type: application/json');，再输出json_encode处理后的结果。
• 跨域限制问题：如果前端页面和data.php不在同一个域名、端口、协议下，会触发跨域限制导致AJAX拿不到返回数据，打开浏览器控制台可以看到CORS相关报错，这种情况需要在data.php中加跨域头header('Access-Control-Allow-Origin: *');（生产环境建议替换为实际的前端域名）。

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