图表
Chart / Data Visualization
用可交互的图形比较数值、观察趋势，并随时核对原始数据。
产品使用趋势
最近六个月的活跃使用
左右键浏览数据点，上下键切换系列，Enter 选择。也可展开下方数据表读取全部数据。
图表进入视野后加载，也可以展开数据表。
查看数据表
| 分类 | 工作区 |
|---|---|
| 五月 | 128 |
| 六月 | 176 |
| 七月 | 158 |
| 八月 | 240 |
| 九月 | 286 |
| 十月 | 352 |
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'chart'
);
view.element.addEventListener('ui:select', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
用户需要理解趋势、比较多个系列或查看组成比例，并能通过图例与读数探索数据。
什么时候不用
只有一个确定数值时优先直接展示数字；不要用没有原始数据的装饰曲线暗示真实趋势。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
type | "area" |
title | "产品使用趋势" |
description | "最近六个月的活跃使用" |
unit | "次" |
categories | ["五月","六月","七月","八月","九月","十月"] |
series | [{"name":"工作区","data":[128,176,158,240,286,352]}] |
loading | false |
error | "" |
zoom | false |
事件
ui:select ui:change ui:error
INTERACTION NOTES
交互与可访问性
- 图例可用键盘切换，图表旁提供可展开的原始数据表。
- 标题、单位和空值明确；不只依靠颜色区分系列。
- 减少动态效果时停用图表动画，尺寸和主题变化后重新适配。
和相似组件的区别
Chart 用图形帮助理解数据；Table 保留精确数值。两种呈现互补，图表不替代表格的可访问入口。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
原生 JavaScript、React / Next.js · 来源核验