blog-chart

Name: blog-chart
Author: infrasity-labs

github.com/infrasity-labs设计与 UI15094 次安装18 周前更新

代码仓库

关于 blog-chart

blog-chart 是供 blog-write 和 blog-rewrite 内部调用的技能，用于为博客文章生成内嵌 SVG 数据图表。它根据数据类型选择图表形式，并规定适用于明暗背景的样式、无障碍说明和 MDX 属性格式。

主要功能

01生成内嵌 SVG 图表
02按数据模式选择图表类型
03提供 HTML 与 MDX 输出格式
04使用适配明暗背景的样式
05包含屏幕阅读器说明与来源标注

适用场景

01在博客文章中呈现数据对比
02将趋势或分布数据制成图表
03为 MDX 文章生成符合格式的 SVG

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/infrasity-labs/dev-gtm-claude-skills --skill blog-chart

安装后在 Claude Code 中输入/blog-chart确认已加载。

详细介绍

博客图表：内置 SVG 数据可视化

为博客文章生成兼容深色模式的内联 SVG 图表。当 blog-write 和 blog-rewrite 识别出适合用图表呈现的数据时，会在内部调用。不是面向用户的独立命令。

样式的权威来源： references/visual-media.md

输入格式

撰写者或研究者会传入图表请求：

Chart Request:
- Type: horizontal bar
- Title: "AI Citation Sources by Platform"
- Data: ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, Reddit 7.15%
- Source: Ahrefs, December 2025
- Platform: mdx (or html)

图表类型选择

根据数据模式进行选择。图表类型必须多样化——同一篇文章中不得重复使用同一种类型。

数据模式	最佳图表类型
前后对比	分组柱状图
因素排名／相关性	棒棒糖图
整体构成／市场份额	环形图
随时间变化的趋势	折线图
百分比提升	水平柱状图
分布／范围	面积图
多维评分	雷达图

样式规则（不可妥协）

所有图表都必须同时适用于深色和浅色背景：

Text elements:     fill="currentColor"
Grid lines:        stroke="currentColor" opacity="0.08"
Axis lines:        stroke="currentColor" opacity="0.3"
Background:        transparent (no fill on root SVG)
Subtitle text:     fill="currentColor" opacity="0.45"
Source text:        fill="currentColor" opacity="0.35"
Label text:        fill="currentColor" opacity="0.8"

调色板

颜色	Hex	使用场景
橙色	`#f97316`	主要／最高值
天蓝色	`#38bdf8`	次要／对比
紫色	`#a78bfa`	第三类／特殊类别
绿色	`#22c55e`	第四类／正向指标

对于彩色元素内的文字：使用 fill="white" 和 fontWeight="800"。

标准 SVG 外壳（HTML）

<svg
  viewBox="0 0 560 380"
  style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif"
  role="img"
  aria-label="Chart description with key data point"
>
  <title>Chart Title</title>
  <desc>Description for screen readers with all key data points and source</desc>

  

  <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
    Source: Source Name (Year)
  </text>
</svg>

JSX/MDX 外壳（驼峰命名属性）

<svg
  viewBox="0 0 560 380"
  style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}}
  role="img"
  aria-label="Chart description"
>
  <title>Chart Title</title>
  <desc>Description for screen readers</desc>

  {/* Chart content */}

  <text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
    Source: Source Name (Year)
  </text>
</svg>

JSX 属性转换（MDX 必需）

HTML	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={{...}}`

图表类型构建

水平柱状图

适用于：百分比提升、单指标对比。

定义图表区域：x=80，y=40，宽度=440，高度=280
计算柱高：chartHeight / dataCount - gap（gap=8）
计算柱宽：(value / maxValue) * chartWidth
定位柱子：y = chartY + index * (barHeight + gap)
在左侧标注类别名称（在 x=75 处右对齐）
在柱子末端标注数值：百分比或数字
在底部居中标注来源文字

分组柱状图

适用于：前后对比、A 与 B 对比。

沿 Y 轴定义各组，在每组内放置柱子
对两个系列使用 2 种颜色（主要色 + 次要色）
在顶部添加图例：每个系列使用彩色方块 + 标签
组间距应大于组内间距

环形图

适用于：整体构成、市场份额。

中心：cx=280，cy=180，外半径=140，内半径=80
使用累积角度计算弧形分段
每个分段：<path d="M... A... L... A... Z" fill="color" />
中心文字：总计或关键标签
在图表下方添加图例，包含彩色方块 + 标签 + 数值

折线图

适用于：随时间变化的趋势。

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" 填充折线下方区域

棒棒糖图

适用于：因素排名、相关性。

使用水平布局（类似柱状图，但以圆形表示数据点）
从坐标轴到数据点绘制细线：stroke="currentColor" opacity="0.15" strokeWidth="1"
在数据点处绘制圆形：r="6"，并设置填充色
在圆形旁标注数值
在 Y 轴标注类别（左对齐）

面积图

适用于：分布、累积数据。

与折线图相同，但填充折线下方区域
区域填充：<path d="M... L... L... Z" fill="color" opacity="0.15" />
在顶部绘制折线：stroke="color" strokeWidth="2" fill="none"
在区域后方绘制网格线

雷达图

适用于：多维度评分（5-7 个轴）。

中心：cx=280, cy=190
绘制同心多边形作为网格（3-4 层）
以相等角度计算各轴的端点
根据数值比例，在各轴上绘制数据点
用填充多边形连接数据点：fill="color" opacity="0.2" stroke="color"
在每个轴的外缘标注标签

输出格式

将每个图表包裹在 <figure> 元素中：

HTML：

<figure>
  <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-label="[description]">
    <title>[Chart Title]</title>
    <desc>[Full description with data points for screen readers]</desc>
    
    <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
      Source: [Source Name] ([Year])
    </text>
  </svg>
</figure>

MDX：

<figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}>
  <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-label="[description]">
    <title>[Chart Title]</title>
    <desc>[Full description]</desc>
    {/* chart content with camelCase attributes */}
    <text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
      Source: [Source Name] ([Year])
    </text>
  </svg>
</figure>

质量检查清单（返回前核对）

支持 Markdown

登录后评论