ICEN UI
ICEN UI 图表总览
Docs ⌘K
Beta · 演进中

图表总览

图表族总览：零依赖纯 SVG 渲染，14 种图型共用一份 JSON 规格。

Preview
图表 charts
通用层

悬停看 tooltip · 单击 / 双击 / 右键数据点 · 点图例行切换系列——事件日志在下方

事件日志：等待交互…

垂直柱状 · 每月投稿

水平条形 · 流量来源

堆叠条 · 任务进度

环形 · 工时分布

进度环 · 完成率

迷你趋势 · 近 14 天

折线 · 一周活跃

贡献图 · 近 26 周

html
<div class="icen-toolbar" style="margin-bottom:10px">  <span class="icen-toolbar-label">通用层</span>  <button class="icen-btn icen-btn-sm icen-btn-primary" type="button" data-chart-spec="line">多系列折线</button>  <button class="icen-btn icen-btn-sm" type="button" data-chart-spec="vbar">分组柱状</button>  <button class="icen-btn icen-btn-sm" type="button" data-chart-spec="stacked">堆叠柱状</button>  <button class="icen-btn icen-btn-sm" type="button" data-chart-spec="scatter">散点气泡</button>  <button class="icen-btn icen-btn-sm" type="button" data-chart-spec="calendar">贡献日历</button>  <button class="icen-btn icen-btn-sm" type="button" data-chart-spec="donut">环形占比</button></div><p class="demo-label" style="margin:0 0 10px">悬停看 tooltip · 单击 / 双击 / 右键数据点 · 点图例行切换系列——事件日志在下方</p><div class="icen-chart" id="chart-universal" style="border:1px solid var(--icen-token-line-soft);border-radius:var(--icen-radius-md);padding:12px"></div><p class="demo-label" id="chart-event-log" style="margin-top:8px">事件日志：等待交互…</p><div class="chart-grid" style="margin-top:16px">  <div>    <p class="chart-cap">垂直柱状 · 每月投稿</p>    <div class="icen-chart" id="icen-chart-vbar"></div>  </div>  <div>    <p class="chart-cap">水平条形 · 流量来源</p>    <div class="icen-chart" id="icen-chart-hbar"></div>  </div>  <div>    <p class="chart-cap">堆叠条 · 任务进度</p>    <div class="icen-chart" id="icen-chart-stack"></div>  </div>  <div>    <p class="chart-cap">环形 · 工时分布</p>    <div class="icen-chart" id="icen-chart-donut"></div>  </div>  <div>    <p class="chart-cap">进度环 · 完成率</p>    <div class="icen-chart" id="icen-chart-gauge"></div>  </div>  <div>    <p class="chart-cap">迷你趋势 · 近 14 天</p>    <div class="icen-chart" id="chart-spark"></div>  </div>  <div style="grid-column:1/-1">    <p class="chart-cap">折线 · 一周活跃</p>    <div class="icen-chart" id="icen-chart-line"></div>  </div>  <div style="grid-column:1/-1">    <p class="chart-cap">贡献图 · 近 26 周</p>    <div class="icen-chart" id="icen-chart-heatmap"></div>  </div></div>

特性

下方演示可切换图型并实时查看事件日志。

接口

导出
renderVBarrenderHBarrenderStackrenderDonutrenderLinerenderArearenderRadarrenderHeatmaprenderSparklinerenderGaugerenderCalendarrenderScatterrenderChartnormalizeChartSpecinferChartTypechartFormatValueregisterChartTone 共享行为模块，清单含族内导出
事件
icen:chart-legend-toggleicen:chart-legend-visibilityicen:chart-zoom detail 契约见 IcenEventMap；共享行为模块，清单含族内事件
类型
dist/behaviors/charts.d.mts（随 npm 包发布，含全部 JSDoc 约束）

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

js
import '@icen.ai/ui/kit/charts';

也可以用脚手架直接打印引入行：

bash
bunx --bun @icen.ai/ui add charts

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/charts.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

js
// ── 通用层（推荐；纯 JSON 规格，AI 调用层同构）──import { renderChart } from '@icen.ai/ui/behaviors/charts';const handle = renderChart(el, {  title: '一周活跃',  labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],  series: [    { name: 'Web', values: [8, 14, 9, 18, 22, 16, 25] },    { name: 'CLI', values: [3, 5, 4, 8, 6, 11, 9] },  ],  format: { notation: 'compact', unit: '次' },  // type 缺省自动推断（时间序→line / 占比→donut / dates→calendar / points→scatter…）  // tooltip: false 关闭内置提示；stacked: true 堆叠柱；legend: false 初始隐藏图例});// 头部小眼睛切换全部图例（派 icen:chart-legend-visibility）；点图例项切换单系列handle.on('click', (d) => console.log(d.label, d.value, d.seriesName));handle.on('contextmenu', (d, e) => openContextMenu(e, d));  // 右键接自家 context-menuhandle.update(nextSpec);   // 原地重渲染（事件委托保留）// 任意维度原始记录 + 字段映射（pivot 成 类目 × 系列）renderChart(el, {  data: [{ 城市: '北京', 渠道: '直营', 销量: 120 }, /* … */],  dims: { label: '城市', series: '渠道', value: '销量' },});// 容错归一（LLM/外部输入友好）：'bar'→vbar、'pie'→donut、字符串数字、JSON 字符串import { normalizeChartSpec, inferChartType } from '@icen.ai/ui/behaviors/charts';// ── 底层渲染器（按需安装细分类型 kit/chart-line 等，只引需要的 CSS + JS）──import { renderHeatmap, renderCalendar, renderScatter } from '@icen.ai/ui/behaviors/charts';renderHeatmap(el, { values: 近180天数值数组, weeks: 26 });        // 周格热力renderCalendar(el, { dates: ['2026-07-01', /* … */], values: [5, /* … */] }); // 贡献日历（月份标签）renderScatter(el, { points: [{ x: 1, y: 2, size: 30, label: 'A' }] }); // 散点/气泡