HTML无法直接绘制复杂图表，需借助JS库（如ECharts、Chart.js）或外部服务，在/容器中动态生成；须显式设置容器宽高、确保DOM就绪、数据长度一致、使用语义化布局，并注意跨域图片导致的toDataURL()失败。
HTML里没法直接画复杂图表，得靠JS库或服务
浏览器原生HTML只负责结构，<canvas></canvas> 和 <svg></svg> 是容器，不是绘图工具。所谓“显示复杂图表”，实际是用 JavaScript 在这些标签里动态生成图形，或者嵌入外部服务（比如 ECharts、Chart.js、Plotly、甚至 Tableau Public 的 iframe）。
常见错误现象：Uncaught ReferenceError: echarts is not defined——忘了引入 JS 库；或者图表区域空白但控制台没报错——div 容器没设 width 和 height，导致 echarts.init() 初始化失败。
- 必须显式设置容器的宽高（CSS 或内联 style），不能依赖内容撑开
- 初始化图表前确保 DOM 已就绪，别在
里直接调echarts.init() - 如果数据来自 API，记得等
fetch完再setOption()，否则图表空着
用 Chart.js 渲染柱状图时，data.labels 和 data.datasets[0].data 长度必须一致
这是最常踩的坑：传进去的标签数和数据点数对不上，图表不报错但渲染异常（比如只显示第一根柱子、y 轴标尺错乱、或整个 canvas 空白）。Chart.js 不做强校验，静默失败。
使用场景：后台返回 JSON，前端解构时不小心把 labels 取成对象键名数组，而 data 是按时间顺序取的数值数组，两者顺序或长度不一致。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 检查
console.log(data.labels.length, data.datasets[0].data.length)是否相等 - 避免用
Object.keys(obj)当 labels——除非你确定 key 的顺序和后端数据顺序严格一致 - 推荐统一从同一数组 map 出来：
labels: rawData.map(d => d.month), data: rawData.map(d => d.sales)
图表下方加文字结论区，别用 堆样式，用语义化 + CSS Grid
很多人把结论文字硬塞进一个 <div class="desc">，然后用 <code>margin-top 或 position: relative 往下挪，结果在不同屏幕或字体缩放下错位。其实 HTML+CSS 完全能干净承载“图表+结论”这个组合语义。
性能影响小，但可维护性差：每次改间距都要翻 CSS；无障碍访问时，屏幕阅读器可能无法正确关联图表和描述。
- 用
<figure></figure> 包图表容器，<figcaption></figcaption> 放结论文字——这是原生语义标签
- 父容器设
display: grid; grid-template-rows: auto max-content;，让结论区自动贴底
- 结论文字里关键数字用
<strong></strong> 包裹，比如“同比增长 23.6%”，方便后续 CSS 或 JS 提取
导出 PNG 时 canvas.toDataURL() 失败？跨域图片资源是隐形杀手
图表里用了自定义图标、背景图或用户头像，且这些图来自其他域名（比如 CDN 或头像服务），canvas.toDataURL() 就会抛 SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement'。这不是 Chart.js 或 ECharts 的 bug，是浏览器安全策略。
使用场景：ECharts 配置了 series.icon: 'image://https://cdn.example.com/icon.png'，本地开发正常，上线后导出失败。
- 确认所有
image:// 或 url(...) 资源都带 CORS 响应头（Access-Control-Allow-Origin: *）
- 更稳的做法：把图标转成 base64 内联，或用 SVG 字符串代替图片路径
- 临时调试可用
canvas.crossOrigin = 'anonymous'，但仅当服务端支持 CORS 才有效
复杂点在于：错误不发生在图表渲染时，而是在导出那一刻才暴露；而且控制台可能只报 SecurityError，不提示具体哪个资源惹的祸。建议导出前先遍历图表配置里的所有 URL，用 fetch(url, {mode: 'cors'}) 预检一次。
很多人把结论文字硬塞进一个 <div class="desc">，然后用 <code>margin-top 或 position: relative 往下挪，结果在不同屏幕或字体缩放下错位。其实 HTML+CSS 完全能干净承载“图表+结论”这个组合语义。
性能影响小，但可维护性差：每次改间距都要翻 CSS；无障碍访问时，屏幕阅读器可能无法正确关联图表和描述。
- 用
<figure></figure>包图表容器，<figcaption></figcaption>放结论文字——这是原生语义标签 - 父容器设
display: grid; grid-template-rows: auto max-content;，让结论区自动贴底 - 结论文字里关键数字用
<strong></strong>包裹，比如“同比增长 23.6%”，方便后续 CSS 或 JS 提取
导出 PNG 时 canvas.toDataURL() 失败？跨域图片资源是隐形杀手
图表里用了自定义图标、背景图或用户头像，且这些图来自其他域名（比如 CDN 或头像服务），canvas.toDataURL() 就会抛 SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement'。这不是 Chart.js 或 ECharts 的 bug，是浏览器安全策略。
使用场景：ECharts 配置了 series.icon: 'image://https://cdn.example.com/icon.png'，本地开发正常，上线后导出失败。
- 确认所有
image://或url(...)资源都带 CORS 响应头（Access-Control-Allow-Origin: *） - 更稳的做法：把图标转成 base64 内联，或用 SVG 字符串代替图片路径
- 临时调试可用
canvas.crossOrigin = 'anonymous'，但仅当服务端支持 CORS 才有效
复杂点在于：错误不发生在图表渲染时，而是在导出那一刻才暴露；而且控制台可能只报 SecurityError，不提示具体哪个资源惹的祸。建议导出前先遍历图表配置里的所有 URL，用 fetch(url, {mode: 'cors'}) 预检一次。
