blog-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Blog Chart -- Built-In SVG Data Visualization

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

Generates dark-mode-compatible inline SVG charts for blog posts. Invoked internally by

blog-write

and

blog-rewrite

when chart-worthy data is identified. Not a standalone user-facing command.

Styling source of truth:

references/visual-media.md

为博客文章生成适配深色模式的内嵌式SVG图表。当识别出适合制作图表的数据时，会由

blog-write

和

blog-rewrite

内部调用。这不是一个独立的面向用户的命令。

样式权威来源：

references/visual-media.md

Input Format

输入格式

The writer or researcher passes a chart request:

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)

撰稿人或研究员需提交如下图表请求：

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)

Chart Type Selection

图表类型选择

Select based on the data pattern. Diversity is mandatory — never repeat a type within one post.

Data Pattern	Best Chart Type
Before/after comparison	Grouped bar chart
Ranked factors / correlations	Lollipop chart
Parts of whole / market share	Donut chart
Trend over time	Line chart
Percentage improvement	Horizontal bar chart
Distribution / range	Area chart
Multi-dimensional scoring	Radar chart

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

数据模式	最佳图表类型
前后对比数据	分组条形图
排名因素/相关性	棒棒糖图
占比数据/市场份额	环形图
时间趋势数据	折线图
百分比提升数据	水平条形图
分布/范围数据	面积图
多维度评分数据	雷达图

Styling Rules (Non-Negotiable)

样式规则（必须遵守）

All charts must work on both dark and light backgrounds:

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"

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

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"

Color Palette

调色板

Color	Hex	Use Case
Orange	`#f97316`	Primary / highest value
Sky Blue	`#38bdf8`	Secondary / comparison
Purple	`#a78bfa`	Tertiary / special category
Green	`#22c55e`	Quaternary / positive indicator

For text inside colored elements:

fill="white"

with

fontWeight="800"

颜色	十六进制值	使用场景
橙色	`#f97316`	主色/最高值
天蓝色	`#38bdf8`	辅助色/对比数据
紫色	`#a78bfa`	第三色/特殊分类
绿色	`#22c55e`	第四色/正向指标

彩色元素内的文本：

fill="white"

且

fontWeight="800"

。

Standard SVG Shell (HTML)

HTML标准SVG框架

xml

<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>

  <!-- Chart content -->

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

xml

<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>

  <!-- Chart content -->

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

JSX/MDX Shell (camelCase attributes)

JSX/MDX框架（采用小驼峰命名属性）

jsx

<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

<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 Attribute Conversion (Required for MDX)

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

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

Chart Type Construction

各图表类型构建方法

Horizontal Bar Chart

水平条形图

Best for: percentage improvements, single-metric comparisons.

Define chart area: x=80, y=40, width=440, height=280
Calculate bar height:
```
chartHeight / dataCount - gap
```
(gap=8)
Calculate bar width:
```
(value / maxValue) * chartWidth
```
Position bars:
```
y = chartY + index * (barHeight + gap)
```
Label on left (right-aligned at x=75): category name
Value label at end of bar: percentage or number
Source text at bottom center

最佳适用场景：百分比提升数据、单指标对比。

定义图表区域：x=80, y=40, width=440, height=280
计算条形高度：
```
chartHeight / dataCount - gap
```
（gap=8）
计算条形宽度：
```
(value / maxValue) * chartWidth
```
定位条形：
```
y = chartY + index * (barHeight + gap)
```
左侧添加标签（右对齐，x=75）：分类名称
条形末端添加数值标签：百分比或具体数字
底部居中添加来源文本

Grouped Bar Chart

分组条形图

Best for: before/after, A vs B comparisons.

Define groups along Y axis, bars within each group
Use 2 colors (primary + secondary) for the two series
Add legend at top: colored square + label for each series
Gap between groups > gap within groups

最佳适用场景：前后对比、A/B对比数据。

沿Y轴定义分组，每组内包含多个条形
为两个系列使用2种颜色（主色+辅助色）
顶部添加图例：彩色方块+每个系列的标签
组间间距 > 组内条形间距

Donut Chart

环形图

Best for: parts of whole, market share.

Center: cx=280, cy=180, outer radius=140, inner radius=80
Calculate arc segments using cumulative angles

Each segment:

<path d="M... A... L... A... Z" fill="color" />

Center text: total or key label
Legend below chart with color squares + labels + values

最佳适用场景：占比数据、市场份额。

中心位置：cx=280, cy=180, 外半径=140, 内半径=80
使用累计角度计算弧线段

每个线段：

<path d="M... A... L... A... Z" fill="color" />

中心添加文本：总计或关键标签
图表下方添加图例，包含彩色方块+标签+数值

Line Chart

折线图

Best for: trends over time.

X axis: time periods, evenly spaced
Y axis: value range with 4-5 grid lines
Draw grid lines:
```
stroke="currentColor" opacity="0.08"
```

Plot data points:

<circle cx=... cy=... r="4" fill="color" />

Connect with:

<polyline points="..." fill="none" stroke="color" strokeWidth="2" />

Optional: area fill below line with
```
opacity="0.1"
```

最佳适用场景：时间趋势数据。

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"
```

Lollipop Chart

棒棒糖图

Best for: ranked factors, correlations.

Horizontal orientation (like bar chart but with circles)

Thin line from axis to data point:

stroke="currentColor" opacity="0.15" strokeWidth="1"

Circle at data point:
```
r="6"
```
with fill color
Value label next to circle
Categories on Y axis (left-aligned)

最佳适用场景：排名因素、相关性数据。

水平布局（类似条形图，但使用圆点）

从轴到数据点的细线：

stroke="currentColor" opacity="0.15" strokeWidth="1"

数据点处的圆点：
```
r="6"
```
，使用填充色
圆点旁添加数值标签
Y轴添加分类标签（左对齐）

Area Chart

面积图

Best for: distribution, cumulative data.

Same as line chart but with filled area below

Area fill:

<path d="M... L... L... Z" fill="color" opacity="0.15" />

Line on top:

stroke="color" strokeWidth="2" fill="none"

Grid lines behind the area

最佳适用场景：分布数据、累计数据。

基础与折线图一致，但折线下方添加填充区域

区域填充：

<path d="M... L... L... Z" fill="color" opacity="0.15" />

顶部折线：

stroke="color" strokeWidth="2" fill="none"

网格线置于区域后方

Radar Chart

雷达图

Best for: multi-dimensional scoring (5-7 axes).

Center: cx=280, cy=190
Draw concentric polygons for grid (3-4 levels)
Calculate axis endpoints at equal angles
Plot data points on each axis proportional to value

Connect data points with filled polygon:

fill="color" opacity="0.2" stroke="color"

Label each axis at the outer edge

最佳适用场景：多维度评分（5-7个轴）。

中心位置：cx=280, cy=190
绘制同心圆网格（3-4层）
计算每个轴的端点，角度均匀分布
在每个轴上按比例绘制数据点

连接数据点并填充多边形：

fill="color" opacity="0.2" stroke="color"

每个轴的外边缘添加标签

Output Format

输出格式

Wrap every chart in a

<figure>

element:

HTML:

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>
    <!-- chart content -->
    <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
      Source: [Source Name] ([Year])
    </text>
  </svg>
</figure>

MDX:

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>

所有图表需包裹在

<figure>

元素中：

HTML：

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>
    <!-- chart content -->
    <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
      Source: [Source Name] ([Year])
    </text>
  </svg>
</figure>

MDX：

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>

Quality Checklist (Verify Before Returning)

质量检查清单（返回前需验证）

No hardcoded text colors (all use
```
currentColor
```
)
No white/light backgrounds (transparent or none)
Source attribution text present at bottom
```
role="img"
```
and
```
aria-label
```
present on
```
<svg>
```
```
<title>
```
and
```
<desc>
```
present inside
```
<svg>
```
Chart type not already used in this post
If MDX: all attributes camelCased (no hyphens in attribute names)
Data values match the source data exactly
Color palette uses only approved colors
ViewBox is
```
0 0 560 380
```
(standard) or justified alternative

未硬编码文本颜色（全部使用
```
currentColor
```
）
无白色/浅色背景（透明或无背景）
底部存在来源标注文本
```
<svg>
```
元素包含
```
role="img"
```
和
```
aria-label
```
```
<svg>
```
内部包含
```
<title>
```
和
```
<desc>
```
该图表类型未在本文中重复使用
若为MDX：所有属性采用小驼峰命名（属性名无连字符）
数据值与源数据完全匹配
调色板仅使用批准的颜色
ViewBox为
```
0 0 560 380
```
（标准值）或有合理替代值