用途:为博客文章生成兼容深色模式的 inline SVG 数据图表,由 blog-write 和 blog-rewrite 在识别到值得制图的数据时内部调用,并非独立面向用户的命令。样式以 skills/blog/references/visual-media.md 为准。
主要能力:支持横向条形、分组条形、环形、折线、棒棒糖、面积、雷达等图表类型,按数据模式选择(前后对比用分组条形,排名因素用棒棒糖,占比用环形,时间趋势用折线,百分比改进用横向条形,分布用面积,多维评分用雷达)。
使用方式:优先使用确定性 CLI:python3 skills/blog-chart/scripts/generate_chart_svg.py --input chart.json --output chart.html --json。输入为图表请求,含类型、标题、数据、来源、平台(mdx 或 html)。
样式规则:文字用 fill="currentColor",网格线 stroke="currentColor" opacity="0.08",轴线 opacity="0.3",背景透明;副标题与来源文字用 fill="var(--chart-muted, currentColor)"。调色板为橙 #f97316、天蓝 #38bdf8、紫 #a78bfa、绿 #22c55e。不得仅依赖颜色区分,需加直接标签、图案、虚线或标记形状。
输出:每个图表包在 <figure> 中,含 role="img"、aria-labelledby、<title>、<desc> 及底部来源文字与 <figcaption>。MDX 需将属性转为 camelCase。
限制:数据值须与来源完全一致;viewBox 标准为 0 0 560 380;返回前需通过质量清单检查。资料未提供收费、价格、平台支持范围等信息。