博客SVG图表生成器

技能文档

---
name: blog-svg-chart
title: 博客SVG图表生成器
description: 为博客文章生成深色模式兼容的内联SVG数据可视化图表，支持水平条形图、分组条形图、环形图、折线图、棒棒糖图、面积图和雷达图，自动检测平台（HTML与JSX/MDX），强制图表类型多样性、无障碍标记、数据来源标注及透明背景。
category: 开发工具
---

# 博客SVG图表生成器

为博客文章生成高质量的内联SVG数据可视化图表，完美适配深色模式，支持多种主流博客平台。

## 支持的图表类型

| 图表类型 | 适用场景 | 说明 |
|---------|---------|------|
| 水平条形图 | 分类数据对比 | 适合展示多个类别的数值对比 |
| 分组条形图 | 多维度对比 | 在同一图表中对比多组数据 |
| 环形图 | 占比分析 | 展示各部分在整体中的比例 |
| 折线图 | 趋势分析 | 展示数据随时间的变化趋势 |
| 棒棒糖图 | 简洁对比 | 条形图的简约替代方案 |
| 面积图 | 累积趋势 | 强调数量随时间的累积变化 |
| 雷达图 | 多维评估 | 在多个维度上对比数据 |

## 平台自动检测

根据博客平台自动调整输出格式：

- **HTML平台**：直接输出内联SVG代码，嵌入`<svg>`标签
- **JSX/MDX平台**：输出JSX兼容的SVG代码，属性名使用驼峰命名（如`strokeWidth`、`fillOpacity`）

检测规则：
1. 检查文件扩展名：`.mdx` 或 `.jsx` 使用JSX模式
2. 检查内容中是否存在JSX语法特征
3. 默认使用标准HTML SVG模式

## SVG生成规范

### 基础结构

```svg
<!-- 图表容器：透明背景，适配深色模式 -->
<svg viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="图表描述文字">
  <!-- 标题元素，提供无障碍支持 -->
  <title>图表标题</title>
  <!-- 图表内容区域 -->
  <g transform="translate(60, 20)">
    <!-- 坐标轴、数据图形、标签等 -->
  </g>
</svg>
```

### 无障碍要求

每个SVG图表必须包含：

- `role="img"` 属性：标识为图像元素
- `aria-label` 属性：提供图表的简要描述
- `<title>` 元素：提供图表标题
- 数据标签使用足够大的字号（最小12px）以确保可读性

### 深色模式适配

- **背景透明**：不设置`<rect>`背景填充
- **文字颜色**：使用 `#e0e0e0` 或 `currentColor`
- **网格线**：使用 `rgba(255,255,255,0.1)` 半透明白色
- **数据颜色**：选用在深色背景上对比度良好的调色板

推荐调色板：

```
#4fc3f7  -- 浅蓝色
#81c784  -- 浅绿色
#ffb74d  -- 浅橙色
#e57373  -- 浅红色
#ba68c8  -- 浅紫色
#fff176  -- 浅黄色
```

### 数据来源标注

每个图表底部必须标注数据来源：

```svg
<text x="540" y="390" text-anchor="end"
      font-size="10" fill="#999">
  数据来源：XXX统计数据
</text>
```

## 图表类型多样性规则

在同一篇文章中：

1. **不重复使用相同图表类型**：如果已使用条形图，后续数据对比应选用其他类型
2. **根据数据特征选择最合适的图表**：
   - 时间序列数据 -> 折线图或面积图
   - 分类对比数据 -> 水平条形图或棒棒糖图
   - 占比数据 -> 环形图
   - 多维评估 -> 雷达图
3. **单篇文章图表数量**：建议不超过5个，避免信息过载

## 代码示例

### 水平条形图示例

```svg
<svg viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="2024年编程语言使用率对比">
  <title>2024年编程语言使用率对比</title>
  <g transform="translate(120, 20)">
    <!-- Y轴标签 -->
    <text x="-10" y="35" text-anchor="end" font-size="13" fill="#e0e0e0">Python</text>
    <text x="-10" y="75" text-anchor="end" font-size="13" fill="#e0e0e0">JavaScript</text>
    <text x="-10" y="115" text-anchor="end" font-size="13" fill="#e0e0e0">Java</text>
    <text x="-10" y="155" text-anchor="end" font-size="13" fill="#e0e0e0">TypeScript</text>

    <!-- 数据条 -->
    <rect x="0" y="20" width="400" height="24" rx="4" fill="#4fc3f7" opacity="0.85"/>
    <rect x="0" y="60" width="360" height="24" rx="4" fill="#81c784" opacity="0.85"/>
    <rect x="0" y="100" width="280" height="24" rx="4" fill="#ffb74d" opacity="0.85"/>
    <rect x="0" y="140" width="240" height="24" rx="4" fill="#ba68c8" opacity="0.85"/>

    <!-- 数值标签 -->
    <text x="408" y="37" font-size="12" fill="#e0e0e0">30.5%</text>
    <text x="368" y="77" font-size="12" fill="#e0e0e0">27.4%</text>
    <text x="288" y="117" font-size="12" fill="#e0e0e0">21.3%</text>
    <text x="248" y="157" font-size="12" fill="#e0e0e0">18.2%</text>

    <!-- 网格线 -->
    <line x1="0" y1="0" x2="0" y2="180" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
    <line x1="100" y1="0" x2="100" y2="180" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
    <line x1="200" y1="0" x2="200" y2="180" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
    <line x1="300" y1="0" x2="300" y2="180" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
    <line x1="400" y1="0" x2="400" y2="180" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
  </g>
  <!-- 数据来源 -->
  <text x="540" y="280" text-anchor="end" font-size="10" fill="#999">数据来源：开发者调查 2024</text>
</svg>
```

### 环形图示例

```svg
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="项目时间分配占比">
  <title>项目时间分配占比</title>
  <g transform="translate(200, 190)">
    <!-- 环形图各扇区 -->
    <circle r="100" fill="none" stroke="#4fc3f7" stroke-width="40"
            stroke-dasharray="188.5 440" stroke-dashoffset="0" opacity="0.85"/>
    <circle r="100" fill="none" stroke="#81c784" stroke-width="40"
            stroke-dasharray="125.7 503" stroke-dashoffset="-188.5" opacity="0.85"/>
    <circle r="100" fill="none" stroke="#ffb74d" stroke-width="40"
            stroke-dasharray="94.2 534" stroke-dashoffset="-314.2" opacity="0.85"/>
    <circle r="100" fill="none" stroke="#ba68c8" stroke-width="40"
            stroke-dasharray="62.8 566" stroke-dashoffset="-408.4" opacity="0.85"/>

    <!-- 中心标签 -->
    <text text-anchor="middle" dy="-5" font-size="24" font-weight="bold" fill="#e0e0e0">100%</text>
    <text text-anchor="middle" dy="20" font-size="12" fill="#999">总计</text>
  </g>
  <!-- 图例 -->
  <g transform="translate(20, 360)">
    <rect width="12" height="12" rx="2" fill="#4fc3f7"/>
    <text x="18" y="10" font-size="11" fill="#e0e0e0">开发 30%</text>
    <rect x="100" width="12" height="12" rx="2" fill="#81c784"/>
    <text x="118" y="10" font-size="11" fill="#e0e0e0">测试 20%</text>
    <rect x="200" width="12" height="12" rx="2" fill="#ffb74d"/>
    <text x="218" y="10" font-size="11" fill="#e0e0e0">设计 15%</text>
    <rect x="300" width="12" height="12" rx="2" fill="#ba68c8"/>
    <text x="318" y="10" font-size="11" fill="#e0e0e0">其他 10%</text>
  </g>
</svg>
```

## 生成流程

1. **分析数据**：理解数据结构和要表达的信息
2. **选择图表类型**：根据数据特征和文章上下文选择最合适的图表
3. **检测平台**：判断输出HTML SVG还是JSX SVG
4. **生成SVG代码**：按照无障碍规范和深色模式适配要求生成代码
5. **添加标注**：包含标题、数据来源、无障碍标记
6. **检查多样性**：确认与文章中已有图表不重复类型

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。