图表
纯 SVG 零依赖图表组件，chart 自闭合。t 指定类型，d 喂数据，l 给标签，c 定制颜色，无需任何外部图表库即可渲染 20 种图形。所有示例左侧为 DSL、右侧为实时渲染，点「编辑」可即时改动。
支持类型：bar（柱状图）、line（折线图）、area（面积图）、pie（饼图）、donut（环形图）、rose（玫瑰图）、funnel（漏斗图）、radar（雷达图）、scatter（散点图）、bubble（气泡图）、heatmap（热力图）、histogram（直方图）、waterfall（瀑布图）、boxplot（箱线图）、treemap（矩形树图）、sankey（桑基图）、candlestick（K 线图）、progress（进度条）、gauge（仪表盘）、gantt（甘特图）。
属性输出顺序（流式渲染强约束）
输出 [chart] 时，属性必须按 类型 → 样式/布局 → 标签 → 数据 四段顺序排列（缺段跳过）：
t类型（恒首）- 样式/布局属性（影响渲染形态、与数据无关）：
tt、orient、stack、smooth、area、vals、w、h、range、anim、xl、yl、status、zones、zc、c、u、dec、ticks、sub、bins、mode、deps等 l标签（数据相关，但必须在数据之前——先建坐标轴/图例刻度，再画数据点）- 数据载荷（最后）：
d/tasks/rows/nodes+flows/ms/v
[chart t:bar tt:日产量 orient:h vals w:800 h:600 l:"Mon,Tue,Wed,Thu,Fri" d:"10,24,18,30,22"]原因：流式渲染时数据逐点增长，解析器吐出的半成品属性只含当前已累积的键。若样式属性（orient/stack/vals 等）写在 d 之后，预览阶段读不到 → 先按默认布局画，等 ] 闭合样式键到达才翻转（横向柱"末尾突然转向"的根因）。前置后，预览从头即最终形态，无翻转闪烁。严禁 d/tasks 写在 l 或任何样式属性之前。
通用属性
所有图表类型共享下列属性，自闭合。
| 属性 | 含义 | 示例 |
|---|---|---|
t | 图表类型 | t:bar |
d | 数据。单系列逗号分隔；多系列（柱/线/环）用 ` | 分隔；散点/气泡坐标对用;` 分隔 |
l | 标签，逗号分隔 | l:"1月,2月,3月" |
c | 自定义颜色序列，逗号分隔；支持 #hex / rgb() / var(--x) | c:"#1677ff,#52c41a" |
tt | 标题 | tt:月度销售 |
w / h | SVG 宽/高（px，仅影响内部坐标系比例） | w:480 |
v | 单值（环形图中心文字 / 进度条 / 仪表盘当前值） | v:75 |
area | 折线图是否填充（布尔） | area |
vals | 柱/线是否显示数值标签（布尔） | vals |
stack | 堆叠（布尔，柱/线/面积/环形多系列） | stack |
smooth | 折线/面积平滑曲线（布尔） | smooth |
orient | 柱状图方向：h 横向（默认纵向） | orient:h |
xl / yl | X / Y 轴单位名称 | xl:投入 yl:产出 |
range | 仪表盘扫掠角：180（默认）/ 270 / 360 | range:270 |
anim | 数值动画时长（ms，进度条/仪表盘，尊重无障碍偏好自动停） | anim:1200 |
含逗号或竖线的属性值必须用双引号包裹，否则解析器会按分隔符切开。颜色缺省时使用 10 色内置色板。长 X 轴标签会自动 -35° 旋转避让；空数据自动显示「暂无数据」占位。
响应式尺寸：图表默认
width:100%撑满容器，按类型限定最大宽高（max-width × max-height）：柱/线/面积/散点/气泡/直方/瀑布/箱线 1400×600（横向柱orient:h高度上限 800）、K线 1400×600、甘特 1400×640、饼/环/雷达/玫瑰 600×600、仪表盘 600×400、漏斗 1000×600、热力/树图 1000×600、桑基 1000×600、进度条 780×120。超出上限等比缩放居中、不变形。w/h只影响内部坐标系比例、不决定最终渲染大小——通常留空即可；横向柱类别多时可显式设h（最大 800）。
柱状图 t:bar
分组柱状图，自闭合。d 多系列用 | 分隔，每系列一组柱；系列数大于 1 时底部自动生成图例。加 stack 堆叠、orient:h 横向。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 数据，多系列用 ` | ` 分隔 |
l | X 轴标签，逗号分隔 | l:"Q1,Q2,Q3" |
stack | 堆叠（布尔） | stack |
orient | h 横向柱（长标签友好） | orient:h |
vals | 显示柱顶数值 | vals |
多系列对比（自动图例）：
堆叠柱（多系列按列累加）：
横向柱（orient:h，适合长中文标签）：
横向柱（
orient:h）类别在 y 轴、高度随类别数线性增长（每类约 26px），渲染端max-height自动放宽到 800px（纵向柱 580px）。数据/类别多时（如 ≥15 项），可显式设h撑高画布，最大有效值 800（= 显示上限：设更大被截、设更小则柱挤），如[chart t:bar orient:h h:800 l:"..." d:"..."]；类别少无需设（按类别数自动）。纵向柱h一般不设。
折线图 t:line
折线趋势图，自闭合。加 area 开启半透明面积填充；smooth 平滑曲线；stack 堆叠（配合 area 为堆叠面积）；多系列用 | 分隔。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 数据，多系列用 ` | ` 分隔 |
l | X 轴标签，逗号分隔 | l:"周一,周二,周三" |
area | 面积填充（布尔） | area |
smooth | 平滑曲线（布尔） | smooth |
stack | 堆叠（布尔） | stack |
vals | 显示节点数值 | vals |
多系列折线对比 + 平滑曲线：
面积图 t:area
面积图 = 折线图 + 默认填充，自闭合。支持多系列与 stack 堆叠面积（后系列轮廓叠在前系列上）。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 数据，多系列用 ` | ` 分隔 |
l | X 轴标签 | l:"1月,2月,3月" |
stack | 堆叠面积（布尔） | stack |
smooth | 平滑曲线（布尔） | smooth |
堆叠面积（多系列累积对比）：
饼图 t:pie
占比饼图，自闭合。d 为各项数值，l 为各项名称；切片带引导线与百分比标注。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 各项数值，逗号分隔 | d:"45,30,25" |
l | 各项名称，逗号分隔 | l:"搜索,直接,推荐" |
c | 各项颜色 | c:"#1677ff,#52c41a,#faad14" |
环形图 t:donut
环形图，自闭合。结构与饼图一致，多了 v 属性可在圆心显示数字。多系列 d:"1,2|3,4" 渲染为同心多环（外→内）。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 各项数值，逗号分隔；多环用 ` | ` |
l | 各项名称，逗号分隔 | l:"PC,移动,平板" |
c | 各项颜色 | c:"#1677ff,#52c41a,#faad14" |
v | 圆心文字（单环时） | v:78 |
多环对比（本期 vs 上期，外环本期）：
玫瑰图 t:rose
南丁格尔玫瑰图，自闭合。与饼图同角度均分，但切片半径与数值成正比（值越大花瓣越长），适合数值差异较大的占比对比。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 各项数值，逗号分隔 | d:"30,25,20,25" |
l | 各项名称，逗号分隔 | l:"春,夏,秋,冬" |
c | 各项颜色 | c:"#1677ff,#52c41a,#faad14,#f5222d" |
漏斗图 t:funnel
转化/销售漏斗图，自闭合。自上而下逐层收窄的梯形堆叠，宽度与数值成正比，用于展示逐级递减的流程（电商下单、用户注册、招聘筛选）。建议数据降序排列（首层为漏斗口、数值最大）；每层内自动标注名称与相对首层的转化率。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 各层数值，逗号分隔（建议降序） | d:"12000,5400,2800,1600,920" |
l | 各层名称，逗号分隔 | l:"曝光,点击,加购,下单,付款" |
c | 各层颜色 | c:"#1677ff,#52c41a,#faad14" |
雷达图 t:radar
多维能力雷达，自闭合。l 为各维度名称，d 为对应分值（建议 0-100）。支持多系列（d 用 | 分隔）做多实体对比。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 各维度数值，多系列用 ` | ` 分隔 |
l | 各维度名称，逗号分隔 | l:"速度,质量,成本,体验,稳定" |
c | 各系列填充色 | c:"#1677ff,#52c41a" |
多系列对比（产品 A vs 产品 B）：
散点图 t:scatter
二维散点图，自闭合。d 用 分号 ; 分隔坐标对，每对 x,y；xl/yl 可自定义坐标轴名称（缺省为 X/Y）。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 坐标对列表，x,y 之间用 ; 分隔 | d:"1,2;3,5;6,4" |
xl | X 轴名称 | xl:投入 |
yl | Y 轴名称 | yl:产出 |
c | 点颜色序列 | c:"#1677ff" |
xmin/xmax/ymin/ymax | 显式锁定坐标轴范围 | ymin:0 ymax:100 |
注意散点图与柱/线不同：坐标对之间用
;分隔，单个坐标内部用,。
流式渲染防跳：容器模式逐点喂入时，X/Y 轴默认按数据自动伸缩（只扩不缩 + nice 量化），极值扩张瞬间已画点仍可能重排一次。若需绝对零跳，显式设
xmin/xmax/ymin/ymax锁定坐标轴。
气泡图 t:bubble
三维气泡图，自闭合。散点图加第三维：d 用 ; 分隔点，每点 x,y,size，气泡半径与 size 成正比。支持 xmin/xmax/ymin/ymax 显式锁轴（同散点，流式渲染防已画点跳）。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 点列表 x,y,size，; 分隔 | d:"1,2,5;3,4,10" |
xl / yl | X / Y 轴名称 | xl:GDP yl:人口 |
sl | 第三维（size）名称（tooltip） | sl:产值 |
xmin/xmax/ymin/ymax | 显式锁定坐标轴范围（流式防跳） | ymin:0 ymax:100 |
热力图 t:heatmap
矩阵热力图，自闭合。rows 给网格数据（| 分隔行、, 分隔列），cols 列标签、l 行标签（cols 个数 = 每行值数、l 个数 = 行数 | 段数，须匹配否则错位）；色阶按值在 min→max 间线性插值。支持容器模式流式（逐行喂 [hrow v:"v,v,v"] 子节点，hrow = heatmap 行，避让布局 row）。容器流式时，开标签即按 l×cols 画出单色骨架网格，hrow 逐行到达即染色；值域默认只扩不缩（防已填 cell 颜色跳），显式 vmin/vmax 可锁死。hrow 的 v 值碎片化到达也逐 cell 填（不等完整标签）。
| 属性 | 含义 | 示例 |
|---|---|---|
rows | 网格数据，行用 ` | 、列用 ,` |
cols | 列标签，逗号分隔 | cols:"周一,周二,周三" |
l | 行标签，逗号分隔 | l:"早,中,晚" |
c | 色阶 stops（逗号分隔，低→高） | c:"#bae0ff,#1677ff,#0958d9" |
vmin/vmax | 显式锁定色阶值域（流式防已填 cell 颜色跳） | vmin:0 vmax:100 |
直方图 t:histogram
频次分布直方图，自闭合。d 给原始值序列，前端自动分箱（bins 指定箱数，缺省按 √n 估算），统计每箱频次后按柱状图渲染。流式所见即所得：l:"40-50,...,90-100" 范围段标签自动锁 lo/hi/bins（推荐，流式=全量）；或显式 bins+min+max；缺省 bins 首帧定 + lo/hi 只扩不缩，极值扩张瞬间柱高跳一次。bins 须 = l 段数。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 原始数值序列，逗号分隔 | d:"1.2,3.4,5.1,..." |
bins | 箱数，缺省自动；须 = l 段数 | bins:10 |
l | 箱标签；范围段 40-50,...,90-100 自动锁 lo/hi/bins（流式=全量） | l:"40-50,...,90-100" |
min/max | 显式锁定值域（流式零跳） | min:0 max:100 |
ymax | 显式锁定频次上限（纵坐标零跳） | ymax:30 |
瀑布图 t:waterfall
增减瀑布图，自闭合。d 为带正负号的增减序列，柱体浮动累计、正负双色（默认绿/红），相邻段间虚线连接，用于展示从初始值到最终值的逐步增减（财务损益、库存变动）。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 增减值序列（可正可负），逗号分隔 | d:"100,-30,50,-15" |
l | 各段标签 | l:"营收,成本,利润,税费" |
c | 正/负色（前两个） | c:"#52c41a,#f5222d" |
箱线图 t:boxplot
统计分布箱线图，自闭合。d 用 ; 分隔多组，每组五数 min,Q1,中位,Q3,max；展示分布中心、离散度与异常范围，多组并排便于横向对比。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 五数列表，组间 ;、组内 , | d:"1,3,5,7,9;2,4,6,8,10" |
l | 各组名称 | l:"A组,B组,C组" |
矩形树图 t:treemap
占比矩形树图，自闭合。d 格式 名称:数值 逗号分隔，按面积比例切分矩形（大块在先），块内显示名称、数值与占比，适合层级/分类占比的一屏全览。支持容器模式流式（逐项喂 [pt v:"名:值"] 子节点）。
| 属性 | 含义 | 示例 |
|---|---|---|
d | 名称:数值 列表，逗号分隔 | d:"A:100,B:60,C:40" |
c | 配色序列 | c:"#1677ff,#52c41a,#faad14,#f5222d" |
桑基图 t:sankey
流向桑基图，自闭合。nodes 列出节点，flows 给流向 源->目标:流量（多条逗号分隔），流量决定连接带宽度，适合展示资源/资金/用户的流转分布。支持容器模式流式（逐条喂 [flow v:"源->目标:流量"] 子节点，节点自动从 flow 提取，可省略 nodes）。flow 的 v 碎片化到达也逐条填。
| 属性 | 含义 | 示例 |
|---|---|---|
nodes | 节点名称，逗号分隔 | nodes:"A,B,C" |
flows | 流向 源->目标:流量，逗号分隔 | flows:"A->B:10,B->C:5" |
c | 各流向配色 | c:"#1677ff,#52c41a" |
K 线图 t:candlestick
OHLC 蜡烛图，自闭合。d 用 ; 分隔多根 K 线，每根 开盘,最高,最低,收盘；收盘≥开盘 为阳线（默认红）、反之为阴线（默认绿），含影线与实体，用于金融行情。遵循中国惯例红涨绿跌（阳线红=上涨、阴线绿=下跌）。
| 属性 | 含义 | 示例 |
|---|---|---|
d | OHLC 列表，K 线间 ;、字段 , | d:"10,12,8,11;11,13,9,10" |
l | 日期/时间标签 | l:"周一,周二,周三" |
c | 阳/阴线色（前两个，阳红阴绿） | c:"#f5222d,#52c41a" |
进度条 t:progress
横向进度条，自闭合。轨道 + 填充 + 百分比文字，v 给当前值、max/min 定区间，anim 开启从 min 滚到 v 的动画。比仪表盘更轻量，适合 KPI/任务进度。
| 属性 | 含义 | 示例 |
|---|---|---|
v | 当前值 | v:65 |
max / min | 上/下限，默认 100 / 0 | max:100 |
u | 单位后缀；min:0 max:100 时自动 % | u:个 |
l | 前缀标签 | l:已完成 |
c | 填充色 | c:"#1677ff" |
anim | 动画时长（ms） | anim:1000 |
仪表盘 t:gauge
单值仪表盘 / KPI 速度表，自闭合。半圆轨道 + 数值弧 + 指针 + 中心大字 + 刻度，用于展示单个数值在区间内的位置（完成率、CPU 占用、时速、健康度、达标率）。数据用 v 给值，不用 d。
| 属性 | 含义 | 示例 |
|---|---|---|
v | 当前值（必填） | v:72 |
max / min | 上/下限，默认 100 / 0 | max:240 min:0 |
range | 扫掠角：180（默认）/ 270 / 360 | range:270 |
u | 单位后缀；留空且 min:0 max:100 时自动 % | u:"km/h" |
dec | 小数位；默认 span≤10 取 1 位否则 0 | dec:1 |
status | 语义染色并出角标：success(良好) / warning(注意) / danger(告警) / info(正常) | status:danger |
c | 自定义弧色（优先级低于 status/zones） | c:"#1677ff" |
zones | 阶段分布阈值，逗号分隔，把轨道分成多色带，弧色自动取值所在段色 | zones:"60,85" |
zc | zones 段色覆盖（low→high）；默认 绿,黄,红（安全→告警） | zc:"#52c41a,#faad14,#f5222d" |
anim | 数字 + 弧 + 指针动画时长（ms，从 min 滚到 v；尊重无障碍偏好自动停） | anim:1200 |
ticks | 刻度密度，默认 6 | ticks:10 |
l | 指标名（中心数值下方） | l:CPU 使用率 |
sub | 副标题（底部小字，多标题场景） | sub:"数据来源: 监控系统" |
颜色优先级：
zones命中段色 >status语义色 >c自定义 > 默认调色板。超界值自动 clamp 到[min, max]。
基础仪表盘（status 染色 + 副标题）：
带量纲的仪表盘（自定义 max 与单位）：
阶段分布色带（达标率：阈值 60/85 分三段，刻度自动标阈值；弧色随值所在段变化）+ 数字动画：
反向配色（错误率：高值=差，段色红在高位；带小数）：
270° 仪表盘（range:270 弧更完整）：
多 KPI 并排看板（配合栅格）：
甘特图 t:gantt
项目排期甘特图，自闭合。任务条按行排布，支持进度填充、依赖箭头、里程碑、分组配色。mode 留空时自动判断（任务起始值含 - 或 / 视为日期）。
甘特图专属属性
| 属性 | 含义 | 示例 |
|---|---|---|
tasks | 任务列表。每条格式 名称,开始,结束[,进度[,组号]]，多条用 ` | ` 分隔 |
gnames | 分组名称，按组号映射图例文字，多条用 ` | 分隔。tasks 中用了组号（第 5 字段）就必须同步给gnames`，否则图例显示占位符「组1/组2」 |
deps | 依赖关系（finish→start），格式 源索引->目标索引，多条用 , 分隔。索引对应 tasks 在列表中的顺序（从 0 开始） | deps:"0->1,1->2" |
ms | 里程碑。每条格式 名称,时间点[,组号]，多条用 ` | ` 分隔 |
mode | 时间模式：days（天数）/ dates（日期），留空自动判断 | mode:dates |
时间值写法：天数用数字（1,3）；日期用 2026-06-15 或 2026/6/15。日期模式下还会绘制「今天」参考线（落在时间范围内时）。
点击甘特图任意任务条，会高亮其依赖传递闭包（上游 + 下游 + 自身），便于追踪关键路径。
基础甘特图（天数模式）
mode:days，时间值纯数字代表第 N 天。
带依赖与里程碑的甘特图
deps 用 源->目标 表示前序任务完成后才开始后续；ms 标记关键节点为菱形。
日期模式甘特图
mode:dates（或留空让解析器按 - 自动识别），时间用 YYYY-MM-DD 或 YYYY/M/D，会绘制「今天」虚线。
完整属性与甘特图字段说明见 DSL 语法参考 第 5.7 节；如该页未生成，可直接查阅仓库
demo/TOKUI_DSL_REFERENCE.md。