图例遮挡需在Chart.js配置中调整：用plugins.legend.position设方位，align微调对齐，layout.padding扩白边；PHP仅安全输出JSON数据，避免字符串拼接；注意v2/v3配置差异，确认版本并查文档。
Chart.js 图例遮挡图表内容怎么调？
图例（legend）默认在图表顶部或右侧时，很容易盖住柱状图顶部数值、折线图数据点或饼图扇区标签。这不是 PHP 的问题——Chart.js 是前端 JS 库，PHP 只负责吐出数据，真正渲染和布局由浏览器里的 Chart.js 控制。
关键点：PHP 层无需改任何逻辑，所有位置调整都在 JS 初始化配置里做。
-
position: 'top'/'bottom'/'left'/'right'控制图例整体方位 - 加
align: 'start'或'end'可微调图例在该侧的对齐（比如position: 'right'+align: 'start'让图例顶对齐） - 若仍重叠，用
padding手动扩白边：layout: { padding: { right: 40 } }
PHP 输出数据后，JS 怎么安全注入 chart 配置？
常见错误是把 PHP 数组直接 echo json_encode($data) 塞进 JS，却没处理引号、换行或特殊字符，导致 JS 解析失败，图表不渲染。
- 始终用
json_encode($data, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG)，避免中文乱码和 XSS 风险 - 把配置对象整个从 PHP 传入 JS，而不是拼字符串：
const config = ;
- 不要在 PHP 中写
echo "options.legend.position = '$pos';"—— 这种字符串拼接极易出错且难调试
图例太长换行撑开容器？用 maxWidth + labels.usePointStyle
当图例项多（比如 15 个分类）、文字长，position: 'bottom' 下图例会横向溢出，把整个 撑宽甚至触发横向滚动条。
立即学习“PHP免费学习笔记（深入）”；
- 限制图例最大宽度：
maxWidth: 600（单位 px），超出自动换行 - 开启点状图标代替方块：
usePointStyle: true，减小每项宽度 - 配合
padding和fontSize微调：fontSize: 12，padding: 16
为什么改了 legend.position 还没生效？检查这三处
Chart.js v3+ 和 v2 的配置结构差异大，很多老教程代码在新版里直接失效。
- v3 写法是
plugins: { legend: { position: 'bottom' } }；v2 是options.legend.position = 'bottom' - 确认没在其他地方覆盖配置，比如全局
Chart.defaults.plugins.legend.position被提前设死 - 检查控制台是否报错
"Unknown plugin: legend"——说明用了 v2 配置但加载的是 v3 的包
最稳妥的方式：用 Chart.version 打印版本，再查对应文档。图例位置这种基础功能，版本错配是比逻辑更常被忽略的硬伤。
