在博客文章中把可比较数据可视化为暗色模式兼容内联 SVG…

当需要把 3 个以上可比较指标、趋势或前后对比数据嵌入博客文章为内联 SVG 图表时使用。

适用场景

解决思路

1. 以 skills/blog/references/visual-media.md 作为样式唯一来源。
2. 支持 horizontal bar、grouped bar、donut、line、lollipop、area、radar 图表类型。
3. 优先用确定性 CLI：python3 skills/blog-chart/scripts/generate_chart_svg.py --input chart.json --output chart.html --json。
4. 接收图表请求，包含 Type、Title、Data、Source、Platform（mdx 或 html）。
5. 按数据模式选图：前后对比用 grouped bar；排名因素/相关性用 lollipop；部分与整体/市场份额用 donut；时间趋势用 line；百分比改进用 horizontal bar；分布/范围用 area；多维评分用 radar。
6. 优先图表类型多样性，但当可比性或读者理解明显受益时可重复同一类型。
7. 所有图表必须同时适配深色与浅色背景：文本元素用 fill=currentColor；网格线用 stroke=currentColor opacity=0.08；坐标轴线用 stroke=currentColor opacity=0.3；根 SVG 背景透明（不设置 fill）；副标题和来源文本用 fill=var(--chart-muted, currentColor)；标签文本用 fill=currentColor opacity=0.8。
8. 在宿主主题中把 --chart-muted 设为可访问的文本 token；若没有，则浅色背景用 #4b5563，深色背景用 #d1d5db。
9. 不要依赖低透明度的来源或副标题文本来做可见署名。
10. 使用批准调色板：Orange #f97316 用于主系列/最高值；Sky Blue #38bdf8 用于次系列/对比；Purple #a78bfa 用于第三系列/特殊类别；Green #22c55e 用于第四系列/正向指标。
11. 已批准彩色元素内的文字用 fill=#111827 和 fontWeight=800；只有检查其与该填充色对比度至少 4.5:1 后才用白字。
12. 不要只靠颜色区分；添加直接标签、图案、线型虚线、标记形状或图例文本，让色盲读者也能区分系列。
13. HTML 标准 SVG 外壳：viewBox 为 0 0 560 380；style 为 max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif；role=img；aria-labelledby=chart-title chart-desc；内部包含 title id=chart-title 和 desc id=chart-desc；desc 写清所有关键数据点和来源；底部来源文本使用 x=280 y=372 text-anchor=middle font-size=10 fill=var(--chart-muted, currentColor)。
14. JSX/MDX 外壳：使用 camelCase 属性，例如 style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}}；role=img；aria-labelledby 同上；内部放 title 和 desc；底部来源文本用 textAnchor、fontSize 等。
15. 为 MDX 做 JSX 属性转换：stroke-width -> strokeWidth；stroke-dasharray -> strokeDasharray；stroke-linecap -> strokeLinecap；text-anchor -> textAnchor；font-size -> fontSize；font-weight -> fontWeight；font-family -> fontFamily；class -> className；style 字符串 -> style={{...}}。
16. 横向条形图构建：定义图表区 x=80、y=40、width=440、height=280；条高=chartHeight/dataCount-gap（gap=8）；条宽=(value/maxValue)*chartWidth；y=chartY+index*(barHeight+gap)；左侧类别标签在 x=75 右对齐；条末端放百分比或数值标签；底部居中放来源文本。
17. 分组条形图构建：沿 Y 轴分组，组内放多个条；两个系列用主色+辅色；顶部加图例（色块+系列标签）；组间距大于组内间距。
18. 环形图构建：中心 cx=280、cy=180、outer radius=140、inner radius=80；用累计角度计算弧段；每段用 path d=M... A... L... A... Z 和 fill=color；中心文本显示总计或关键标签；图表下方图例含色块+标签+值。
19. 折线图构建：X 轴为等距时间周期；Y 轴值范围配 4-5 条网格线；网格线 stroke=currentColor opacity=0.08；数据点用 circle cx cy r=4 fill=color；用 polyline points fill=none stroke=color strokeWidth=2 连接；可选在线下加 opacity=0.1 的面积填充。
20. 棒棒糖图构建：水平方向，类似条形图但用圆点；从轴到数据点画细线 stroke=currentColor opacity=0.15 strokeWidth=1；数据点用 r=6 的圆并填色；圆点旁放值标签；Y 轴类别左对齐。
21. 面积图构建：同折线图但在线下填充；面积用 path d=M... L... L... Z fill=color opacity=0.15；顶部线用 stroke=color strokeWidth=2 fill=none；网格线在面积后方。
22. 雷达图构建：中心 cx=280、cy=190；画 3-4 层同心多边形网格；按等角度计算轴端点；在每个轴上按数值比例绘制数据点；连接数据点成填充多边形 fill=color opacity=0.2 stroke=color；在外缘给每个轴加标签。
23. 标签规则：长标签在单词边界换行到 tspan 行。
24. 只有换行会与数据标记冲突时才截断标签，并把完整标签放进 desc 或相邻正文。
25. 使用稳定图表尺寸并配响应式 max-width:100%; height:auto 样式，或为密集标签选择合理的更宽 viewBox。
26. 检查移动端宽度，确保轴标签、图例和值标签不重叠。
27. 每个图表都包裹在 figure 元素中输出。
28. HTML 输出：figure 内 svg 使用标准 HTML 外壳；底部放来源 text；figcaption 写 Source: <a href=[Source URL]>[Source Name]</a>, [publication date]。
29. MDX 输出：figure 使用 className=chart-container 和 style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}；svg 使用 camelCase 属性；figcaption 同样包含来源链接和日期。
30. 返回前质量检查：除彩色元素内经对比度检查的标签外，无硬编码文本颜色。
31. 返回前质量检查：无白色/浅色背景（透明或 none）。
32. 返回前质量检查：底部有来源署名文本，且有语义 figcaption。
33. 返回前质量检查：svg 上有 role=img 和 aria-labelledby。
34. 返回前质量检查：svg 内有 title id 和 desc id。
35. 返回前质量检查：图表类型选择支持理解与可比性。
36. 返回前质量检查：如果是 MDX，所有属性已 camelCase，属性名无连字符。
37. 返回前质量检查：数据值与源数据完全一致。
38. 返回前质量检查：调色板只使用批准颜色。
39. 返回前质量检查：viewBox 为 0 0 560 380（标准）或有合理替代。
40. 返回前质量检查：标签、形状、图案或线型提供颜色以外的冗余。

适用边界 · 注意事项

• 不适用于没有可验证来源或数据值不明确的情况，因为必须做来源标注且数据需与源数据完全一致。
• 不适用于作为独立面向用户的命令；它应由 blog-write 或 blog-rewrite 在识别到适合图表化的数据时内部调用。
• 不适用于不需要内联 SVG、也不使用 HTML/MDX 作为输出平台的场景。