纯HTML不能画图表，真正起作用的是JavaScript图表库；canvas是位图容器、性能好适合常规图表，div（配SVG）生成DOM节点、利于SEO和无障碍，选型取决于需求。
纯 HTML 不能画图表，canvas 或 div 只是容器，真正起作用的是 JavaScript 图表库往里面塞内容。选对容器类型、写对尺寸控制、避开 DOM 加载时机陷阱，比调参数更重要。
用 canvas 还是 div 做图表容器？
取决于你要什么：canvas 是位图绘制，性能好、默认响应式强，适合常规折线/柱状/饼图；div（配合 SVG 渲染）生成真实 DOM 节点，利于 SEO、可被 CSS 伪元素微调、支持无障碍阅读，但初始化稍慢、内存占用略高。
-
Chart.js默认用canvas，必须配getContext('2d')，不能直接操作子节点 -
ApexCharts默认用div，但得显式设chart.type: 'svg'才生效，否则仍是 canvas - 如果页面要被搜索引擎收录（比如报表页），优先选
div+ SVG 模式；如果是后台管理页，canvas更省心
width 和 height 属性到底写不写？
写，但只写在 canvas 标签上，且它控制的是绘图区域像素尺寸，不是显示大小——这点极易混淆。
-
：这是 canvas 的“画布分辨率”，影响清晰度，不写会走浏览器默认（通常 300×150），小图会模糊 - CSS 控制显示尺寸：
canvas { width: 100%; height: auto; }或外层div设宽高，canvas 内部会自动缩放 - 如果只用 CSS 设
width/height，没写 HTML 属性，Chart.js 可能渲染错位或空白——尤其在 Safari 上 -
div容器不用设width/height属性，全靠 CSS 控制
为什么图表一加载就空白或报错 CanvasRenderingContext2D is not defined？
绝大多数情况是 DOM 没 ready 就执行了图表初始化代码，或者容器元素根本没找到。
- 确保 JS 在
底部，或监听DOMContentLoaded，别在里直接跑初始化逻辑 - 检查
document.getElementById('myChart')返回是不是null——ID 拼错、大小写不对、容器还没解析到就执行了 JS，都会导致这个结果 -
Chart.js要求容器必须是canvas元素；ECharts和ApexCharts要求是div，混用会报错 - 服务端渲染（如 Next.js）下，图表初始化必须放在
useEffect或componentDidMount里，否则 hydration 阶段找不到 canvas 上下文
响应式失效？先看父容器有没有宽度
responsive: true 不是万能的，它依赖父级有明确宽度。空 div、浮动布局、flex 子项没设 flex-basis，都会让图表塌成一条线。
- 最稳妥做法：给图表容器包一层
div，并设style="width: 100%"或 CSS 类.chart-container { width: 100%; } - 避免用
float直接包裹图表容器——float 元素脱离文档流，父容器高度会坍塌，图表没空间渲染 - Flex 布局中，确保图表容器是 flex item，且没被
min-width: auto卡住（Chrome 有时会这样） - 媒体查询改字体或 padding 没问题，但别用
transform: scale()缩放整个 canvas——文字会糊，tooltip 位置偏移
容器本身不带逻辑，但它决定了图表能不能出来、清不清楚、适配不适应。很多人卡在“图表不显示”，其实问题不在数据格式或配置项，而在那一行 放哪儿、怎么包、有没有被 CSS 意外挤掉空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
