表格语法增强
📋 更新历史
| 日期 | 版本 | 更新内容 |
|---|---|---|
| 2025-11-06 | v1.1.0 | 新增垂直柱状图、面积图、环形图、树状图；支持图表标题；支持表头背景色设置 |
| 2025-08-15 | v1.0.0 | 初始版本 |
PSUIP 扩展了标准 Markdown 表格语法，支持生成各种类型的图表组件，包括柱状图、折线图、饼状图等数据可视化组件。
标准表格语法
PSUIP 完全支持标准 Markdown 表格语法：
| 列标题 1 | 列标题 2 | 列标题 3 |
|---------|---------|---------|
| 单元格 1 | 单元格 2 | 单元格 3 |
| 单元格 4 | 单元格 5 | 单元格 6 |图表语法增强
通过在表格前添加特定的图表类型标识符，可以将表格数据渲染为不同类型的图表组件。
语法规范
图表增强语法格式：
[chart:图表类型]| 列标题 1 | 列标题 2 |
| --- | --- |
| 数据行 1 | 数据值 1 |
| 数据行 2 | 数据值 2 |图表标题支持 v1.1.0 新增
图表支持通过 | 分隔符添加标题：
[chart:图表类型|图表标题]| 列标题 1 | 列标题 2 |示例：
[chart:bar|季度销售额（万元）]
| 季度 | 销售额 |
|------|--------|
| Q1 | 120 |
| Q2 | 180 |支持的图表类型
1. 水平柱状图 (barh)
语法标识：[chart:barh]
数据结构：
- 第一列：类别标签（纵坐标）
- 第二列：数值数据（横坐标）
示例：
[chart:barh]| 部门 | 销售额 |
| --- | --- |
| 销售部 | 1250 |
| 市场部 | 980 |
| 技术部 | 750 |
| 客服部 | 620 |
| 行政部 | 450 |使用场景：
- 部门绩效对比
- 产品销量排名
- 地区数据对比
- 任何需要横向对比的数据
2. 折线图 (grouped_line)
语法标识：[chart:grouped_line]
数据结构：
- 第一列：X轴数据（通常是时间序列）
- 后续列：每列代表一条折线的Y轴数据
示例：
[chart:grouped_line]| 日期 | 心流满意度FSV | 心流专注值FFV | 心流效能值FEV |
| --- | --- | --- | --- |
| 2025-03-10 | 0.0 | 0.36 | 2.55 |
| 2025-03-11 | 0.0 | 0.41 | 2.22 |
| 2025-03-12 | 0.0 | 0.36 | 2.64 |
| 2025-03-13 | 0.0 | 0.32 | 2.94 |
| 2025-03-14 | 0.0 | 0.48 | 1.87 |
| 2025-03-17 | 0.0 | 0.42 | 2.16 |
| 2025-03-18 | 0.0 | 0.41 | 2.28 |
| 2025-03-19 | 0.0 | 0.31 | 2.97 |
| 2025-03-20 | 0.0 | 0.41 | 2.18 |
| 2025-03-21 | 0.0 | 0.56 | 1.52 |使用场景：
- 时间序列数据展示
- 多指标趋势对比
- 性能监控数据
- 业务增长趋势
3. 饼状图 (pie)
语法标识：[chart:pie]
数据结构：
- 第一列：分类标签
- 第二列：占比数值
示例：
[chart:pie]| 行业 | 客户数 |
| --- | --- |
| 金融 | 150 |
| 电商 | 230 |
| 教育 | 89 |
| 医疗 | 67 |
| 制造 | 145 |使用场景：
- 市场份额分析
- 用户群体分布
- 资源占比展示
- 分类数据统计
4. 垂直柱状图 (bar) v1.1.0 新增
语法标识：[chart:bar]
数据结构：
- 第一列：类别标签（横坐标）
- 第二列：数值数据（纵坐标）
示例：
[chart:bar|季度销售额（万元）]
| 季度 | 销售额 |
|------|--------|
| Q1 | 120 |
| Q2 | 180 |
| Q3 | 240 |
| Q4 | 320 |使用场景：
- 时间段数据对比
- 类别数据对比
- 销售额展示
- 任何需要纵向柱状对比的数据
与水平柱状图的区别：
bar：垂直方向，类别在底部，数值在左侧barh：水平方向，类别在左侧，数值在底部
5. 面积图 (area_chart) v1.1.0 新增
语法标识：[chart:area_chart]
数据结构：
- 第一列：X轴数据（通常是时间序列）
- 后续列：每列代表一个系列的Y轴数据
示例：
[chart:area_chart|AI-PC 趋势]
| 时间 | 出货量 | 渗透率 |
|------|--------|--------|
| 2025.04 | 100 | 20 |
| 2025.05 | 160 | 24 |
| 2025.06 | 210 | 28 |
| 2025.07 | 250 | 32 |
| 2025.08 | 290 | 36 |使用场景：
- 趋势数据展示
- 多指标对比分析
- 累积数据可视化
- 强调数据的连续性和总量
特点：
- 填充线下区域，视觉效果更饱满
- 适合展示数据的总量和趋势
- 支持多个系列叠加显示
6. 环形图 (donut_chart) v1.1.0 新增
语法标识：[chart:donut_chart]
数据结构：
- 第一列：分类标签
- 第二列：占比数值
示例：
[chart:donut_chart|产品占比]
| 类型 | 占比 |
|------|------|
| 轻薄本 | 45 |
| 游戏本 | 35 |
| 工作站 | 20 |使用场景：
- 比例关系展示
- 组成结构分析
- 资源分配可视化
- 现代化的数据占比展示
与饼状图的区别：
donut_chart：中心镂空，更现代、视觉焦点分散pie：实心圆形，视觉更紧凑
7. 树状图 (tree_mind) v1.1.0 新增
语法标识：[chart:tree_mind]
数据结构：
- 使用
layer1到layerN命名列头，表示层级深度 - 每行代表树的一个叶子节点
- 相同层级的相同内容会自动合并为同一节点
示例：
[chart:tree_mind|业务架构层级关系-Q2-FCST(K$)]
| layer1 | layer2 | layer3 | layer4 |
|----------------|------------------------|--------------------|----------------|
| 核心业务板块 | 臻算服务 | 企业级臻算 | 128,560.00 |
| 核心业务板块 | 臻算服务 | 个人端臻算 | 83,836.00 |
| 核心业务板块 | xCloud智能云 | 私有云服务 | 95,320.00 |
| 核心业务板块 | xCloud智能云 | 公有云服务 | 68,452.00 |
| 核心业务板块 | xCloud智能云 | 混合云服务 | 17,140.00 |
| 核心业务板块 | 全周期AI服务 | AI模型开发 | 62,732.80 |
| 核心业务板块 | 全周期AI服务 | AI部署运维 | 54,891.20 |
| 核心业务板块 | 全周期AI服务 | AI定制咨询 | 39,208.00 |
| 创新业务板块 | 智能体矩阵 | 消费级智能体 | 57,895.20 |
| 创新业务板块 | 智能体矩阵 | 工业级智能体 | 38,596.80 |
| 创新业务板块 | 可持续发展解决方案ESG | 碳管理服务 | 22,612.00 |
| 创新业务板块 | 可持续发展解决方案ESG | 绿色运维服务 | 18,089.60 |
| 创新业务板块 | 可持续发展解决方案ESG | ESG咨询报告 | 4,522.40 |使用场景：
- 组织架构展示
- 业务分类层级
- 产品结构可视化
- 层级数据关系展示
层级规则：
- 列名必须以
layer开头，后跟层级数字（从 1 开始） - 不同行中相同 layer 列的相同值会合并为同一个父节点
- 最后一列通常是数值或具体项目名称
- 支持任意层级深度
数据格式要求
数值格式
- 整数：
100、1250、-50 - 小数：
3.14、0.36、-2.5 - 百分比：建议使用小数形式，如
0.15表示 15% - 货币：使用纯数字，单位在列标题中说明
日期格式
支持以下日期格式：
- ISO 格式：
2025-03-10 - 短格式：
03-10、3/10 - 中文格式：
3月10日
文本格式
- 分类标签支持中英文混合
- 避免使用特殊字符：
|、[]、() - 长文本会自动截断显示
高级特性
1. 混合图表类型
在同一文档中可以使用多种图表类型：
## 销售数据分析
### 部门业绩对比
[chart:barh]| 部门 | 销售额(万元) |
| --- | --- |
| 销售部 | 1250 |
| 市场部 | 980 |
### 月度趋势
[chart:grouped_line]| 月份 | 销售额 | 利润 |
| --- | --- | --- |
| 1月 | 800 | 120 |
| 2月 | 950 | 180 |
### 客户分布
[chart:pie]| 类型 | 占比 |
| --- | --- |
| 企业客户 | 60 |
| 个人客户 | 40 |2. 数据验证
系统会自动验证数据格式：
- 数值列必须包含有效数字
- 饼状图数据会自动计算百分比
- 缺失数据会显示为 0 或跳过
3. 响应式设计
所有图表组件都支持响应式设计：
- 自动适配不同屏幕尺寸
- 图表标签智能显示
- 数据点自动优化密度
错误处理
常见错误及解决方案
-
语法错误
<!-- 错误：缺少图表类型 --> [chart]| 数据 | 值 | <!-- 正确：指定图表类型 --> [chart:barh]| 数据 | 值 | -
数据格式错误
<!-- 错误：非数值数据 --> [chart:pie]| 类型 | 占比 | | --- | --- | | A类 | 很多 | <!-- 正确：使用数值 --> [chart:pie]| 类型 | 占比 | | --- | --- | | A类 | 150 | -
结构错误
<!-- 错误：饼状图缺少数值列 --> [chart:pie]| 类型 | | --- | | A类 | <!-- 正确：包含数值列 --> [chart:pie]| 类型 | 数量 | | --- | --- | | A类 | 100 |
表头背景色定制 v1.1.0 新增
PSUIP 支持为表格的表头行设置自定义背景色，通过在表头行末尾添加属性声明实现。
语法规范
| 列标题 1 | 列标题 2 | 列标题 3 |[background:{设计令牌}]
|---------|---------|---------|
| 数据1 | 数据2 | 数据3 |示例
使用设计令牌：
| 功能模块 | 完成度 | 优先级 |[background:{color.primarycontainer.brand0}]
|---------|--------|--------|
| 卡片系统 | 100% | 高 |
| 布局引擎 | 95% | 高 |
| 主题配置 | 88% | 中 |
| 动画效果 | 75% | 中 |
| 响应式设计 | 92% | 高 |使用直接颜色值：
| 项目 | 状态 | 负责人 |[background:#e3f2fd]
|------|------|--------|
| A项目 | 进行中 | 张三 |
| B项目 | 已完成 | 李四 |支持的属性
目前支持的表头属性：
| 属性名 | 说明 | 示例值 |
|---|---|---|
background | 背景色/渐变 | {color.primarycontainer.brand0}, #e3f2fd, linear-gradient(...) |
backgroundImage | 背景图 | url(...) |
使用场景
- 主题强调：通过品牌色突出表格主题
- 数据分类：不同类型的表格使用不同背景色
- 视觉层次：增强表头与数据的视觉区分
- 品牌一致性：统一使用品牌设计令牌
注意事项
- 可读性：确保文字与背景色有足够对比度
- 设计令牌：推荐使用设计令牌而非硬编码颜色
- 语法位置：属性声明必须在表头行末尾
- 多属性：目前仅支持背景相关属性
最佳实践
-
数据准备
- 确保数据准确性和一致性
- 使用描述性的列标题
- 保持数据格式统一
-
图表选择
- 柱状图（bar/barh）：适合对比不同类别
- 折线图（grouped_line）：适合展示趋势变化
- 面积图（area_chart）：适合展示趋势和总量
- 饼状图/环形图（pie/donut_chart）：适合展示组成关系
- 树状图（tree_mind）：适合展示层级结构
-
性能优化
- 控制数据行数（建议不超过 100 行）
- 树状图层级深度建议不超过 5 层
- 避免过于复杂的数据结构
- 合理使用图表类型
-
可访问性
- 提供清晰的图表标题（使用
|分隔符添加） - 使用有意义的数据标签
- 确保色彩对比度适当
- 表头背景色要考虑可读性
- 提供清晰的图表标题（使用
-
视觉设计
- 合理使用表头背景色突出主题
- 图表标题应简洁明了
- 保持设计令牌的一致性使用
Last updated on