Chart.js 初始化需确保DOM就绪、容器设宽高、配置responsive和maintainAspectRatio、适配移动端字体与间距，缺一不可。
Chart.js 初始化前必须确保 <canvas> 已渲染
常见错误是把 new Chart() 写在 <head> 里，或没等 DOM 加载完就执行，报错 Cannot read property 'getContext' of null。这不是库的问题，是执行时机错了。
- 最稳妥做法：把
<script>标签放在</body>前，确保<canvas id="myChart">已被解析 - 若用模块化（如 ES import），需确认
chart.js加载完成后再调用初始化逻辑 - 别忽略父容器：
<div class="chart-container"><canvas id="myChart"></div>必须设style="width: 100%"，否则响应式失效——Canvas 默认宽高是 300×150px，不继承父级尺寸
让图表真正响应式，关键在 options.responsive 和容器约束
只设 responsive: true 不够。Chart.js 会尝试缩放画布，但若外层容器没宽度限制，它可能撑破布局或收缩成一条线。
- 必须同时配置：
options.responsive: true+options.maintainAspectRatio: false（尤其对仪表盘卡片内图表） -
<div class="chart-container">需有明确宽度（如width: 100%）和最小高度（如min-height: 200px），否则移动端可能塌陷 - 避免用
height: 400px固定值；改用min-height或 CSS Grid/Flex 的弹性高度分配
悬停、点击交互不能靠 onclick 写在 <canvas> 上
手写 <canvas onclick="handleClick()"> 无法获取具体数据点位置，且不兼容触摸设备。Chart.js 提供原生事件钩子，更可靠。
- 启用点击：在
options.onClick中处理，elements[0].index给出当前点击数据索引 - 避免硬编码索引映射——把原始 ID 存进数据项，例如
{x: '2024-01', y: 1200, id: 'sales-001'} - 悬停提示需设
options.plugins.tooltip.mode = 'index'，否则多数据集时 tooltip 可能错位
移动端图表文字挤压？优先调 options.plugins.legend.labels.padding 和字体大小
小屏下图例重叠、X 轴标签挤成一团，不是屏幕太小，是默认字号和间距没适配。
立即学习“前端免费学习笔记（深入）”；
- 缩小图例文字：
options.plugins.legend.labels.font.size: 12（默认 12，可压到 10） - 加大图例项间距：
options.plugins.legend.labels.padding: 16（默认 2） - X 轴标签旋转不是万能解——先试
options.scales.x.ticks.maxRotation: 0+options.scales.x.ticks.autoSkip: true - 真要旋转，用
maxRotation: 45，别上 90°，否则 iOS Safari 渲染模糊
响应式图表最难的不是代码量，而是所有约束条件必须同时成立：DOM 就绪、容器有宽高、配置项开关正确、字体与间距适配屏幕密度。漏掉任意一环，图表就在某个设备上“看起来不对”，但又查不出报错。
