纯html不能做数据可视化，需javascript图表库（如chart.js）配合html容器和css样式；css仅能模拟简单图表但缺乏交互、响应式和可维护性。
纯 HTML 本身不能做数据可视化——它只是结构标记语言，没有绘图能力。真正起作用的是 JavaScript 图表库 + HTML 容器 + CSS 样式配合。直接写 <chart></chart> 或用 <div> 加一堆 <code>style 手动画柱子，既不可维护，也不支持交互和响应式。
为什么不能只靠 HTML + CSS 画图表
CSS 可以用 height 和 background-color 模拟简单柱状图，但立刻会遇到硬伤：
- 数据变化时需手动改内联样式，无法绑定数组或 API 返回值
- 没有坐标轴、刻度、图例、tooltip，用户看不懂数值含义
- 缩放、拖拽、导出 PNG、键盘导航等基础交互全部缺失
- 移动端宽度变化时，CSS 百分比柱子会错位，
transform: scale()又模糊文字
最轻量又可靠的方案：Chart.js +
Chart.js 是目前对新手最友好的主流库，依赖少（仅一个 <canvas></canvas> 标签）、文档直给、默认响应式。它不强制你写构建工具，CDN 引入就能跑。
实操步骤：
- 在 HTML 中放一个带
id的<canvas></canvas>：<canvas id="salesChart" width="400" height="250"></canvas>
- 通过 CDN 加载：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
- 用 JS 初始化（注意：必须等 DOM 加载完）：
const ctx = document.getElementById('salesChart').getContext('2d');<br>new Chart(ctx, {<br> type: 'bar',<br> data: {<br> labels: ['Jan', 'Feb', 'Mar'],<br> datasets: [{<br> label: 'Revenue',<br> data: [1200, 1900, 1500],<br> backgroundColor: 'rgba(54, 162, 235, 0.7)'<br> }]<br> }<br>});
关键点：width/height 属性只用于 canvas 像素尺寸，实际显示大小由 CSS 控制；响应式默认开启，但若父容器无宽高，图表会塌缩——务必给 <canvas></canvas> 外层加 <div style="width: 100%">。
<h3>需要服务端渲染或 SEO？选 ApexCharts + <div> 渲染模式
<p><code>ApexCharts 支持 SVG 模式（非 canvas），图表内容是真实 DOM 节点，可被搜索引擎抓取，也方便用 CSS 伪元素微调标签。但它默认仍依赖 JS 执行，服务端渲染需搭配 Next.js / Nuxt 等框架的 ssr: false 配置或用 apexcharts-react 的 loadOptions 延迟初始化。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常见踩坑：
- 直接在
createRoot里初始化ApexCharts实例，会导致 Hydration mismatch —— 必须用useEffect或componentDidMount延后执行 - SVG 模式下，
stroke-width单位是像素，缩放时线条粗细不变，和 canvas 渲染观感不同 - 数据含中文时，若未引入中文字体，Chrome 可能 fallback 到系统字体导致 tooltip 锯齿，需在
chart.fontFamily显式指定'PingFang SC, Microsoft YaHei, sans-serif'
超大数据量（>10k 点）必须绕开 Chart.js
Chart.js 在渲染 5k+ 折线点时明显卡顿，因它为每个点生成独立 <path></path> 或 canvas 绘制指令。此时应切到底层方案：
- 用
d3-selection+d3-scale手写 SVG<path d="M...L..."></path>，单条路径承载全部点，DOM 节点数恒为 1 - 或上
CanvasRenderingContext2D原生 API：预分配Uint8ClampedArray做像素级绘制，性能提升 10 倍以上，但失去 SVG 的 CSS 控制力和可访问性 - 完全规避前端渲染？把图表生成逻辑移到服务端（如 Python + Matplotlib），返回静态 PNG，适合报表邮件场景
真正难的从来不是“怎么画出来”，而是“数据变快时图表是否还准、是否卡、是否读得懂”。别在 <div> 里堆 <code>box-shadow 做饼图了——选对库，再抠细节。
