原子图表
饼图
折线图
面积图
雷达图
散点图
柱状图
堆叠柱状图
正负柱状图
条形图(横向)
条形堆叠图(横向堆叠)
柱状图扩展
漏斗图
指标卡
用于显示单个关键指标数据的卡片组件,支持自定义格式化、主题切换、尺寸调整和弹性布局等功能。
带指标卡的图表
卡片列表 (docCards)
将一行 Markdown 表格映射为一张卡片,默认桌面 2 列、< 480px viewport 强制单列。
与现有图表共用同一套「HTML 注释(含 chartType)+ GFM 表格」数据契约,
表头按「名称/标题、地址/链接/URL、简介/描述、亮点/标签」别名解析为
title / url / description / tags,可通过 fieldMap 覆盖。
cardColumns 控制每行卡片数(取值 1~4,默认 2,超出 clamp 到 4)。
若注释中无法定位主标题列,整表会降级为普通 Markdown 表格渲染。
Markdown 注释驱动(首选用法)
写一行 HTML 注释 + 一张 GFM 表格即可输出卡片栅格,与现有 chart 完全一致。 适合从 LLM 输出 / 文档站直接产出。
DocCards 组件直接使用
当上游已是结构化数据、想绕过 Markdown 直接复用 UI 时,可直接 import { DocCards }。
列数控制 (cardColumns)
桌面端按 cardColumns 精确控制最多 N 列;< 480px viewport 强制单列。
fieldMap 覆盖 + toolbar 槽位
表头不在默认别名表时,用 fieldMap 显式映射;toolbar 槽位用于放右上角操作。
流式追加(模拟 LLM 边产边渲染)
数据增量到达时按行追加;与 chart 一样基于 dataSource 走,无额外接入。
容错与降级
仅缺 亮点 / 简介 时仍正常出卡片;解析阶段无主标题列则整表降级为普通 Markdown 表格。
四象限图 (quadrant)
将表格前 4 行按顺序映射为 2×2 网格:第 1 列为象限标签,第 2 列为条目(支持逗号、分号、顿号、竖线等分隔,与卡片列表 tags 拆分规则一致)。不足 4 行时自动补空占位;超过 4 行只取前 4 行。
与 docCards 相同,推荐 HTML 注释内写 chartType + GFM 表格;若上游已是结构化数据,可直接 import { QuadrantChart }。
Markdown 注释驱动(首选用法)
QuadrantChart 组件直接使用
toolbar 槽位
流式追加(模拟 LLM 边产边渲染)
不足四行与空态
Mermaid 图表
暗黑主题
各图表设置 theme="dark" 后,内部 Ant Design 控件由 ChartContainer 自动套用暗色算法;文档 iframe 使用 background="#141414" 作为页面底色。
