定价

用折线展示数据变化趋势,支持多序列、面积填充、实线与虚线,以及坐标轴、网格和节点样式。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中;本页展示网站用法,支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费,不属于项目,不占项目或开发者席位额度,无需 SnowUI 注册、激活或付费证明。

如何使用

用于连续数据或时间趋势。类别比较用 BarChart;数据点、轴、提示与颜色通过公开图表配置声明。

  • 通过 series 提供数据;组件不生成示例数据,xLabels 与数据点应保持对应。

  • loading 保留轴与画布,等待结束后展示数据;HoverPanel 默认开启,颜色和格式使用图表公开配置。

  • 根默认可访问名称随 LocaleProvider 切换,使用 lineChart.name;显式 aria-label 优先。数据单元格组使用 lineChart.cells。业务名称、数据值与数字格式保持调用方内容。

导入

import { LineChart } from '@snowui-design-system/components';

用法

产品流量与标签密度

series 结合实线与虚线流量趋势。xMaxLabelCount 调整月份标签;showYAxis 隐藏纵轴刻度。红线使用默认线宽。

实色面积填充

area 使用两个相同的不透明色标构成绿色实色填充。xMaxLabelCount={9} 将周坐标轴限制为九个标签;hoverPanelVariant="dark" 使用暗色面板。

标记、参考线与数值标签

showGuides 与 series.markers 突出月访问量。alwaysShowHoverLabel 保持数值可见;replay() 重新播放错列入场动画;valueFormat 让标签保持简洁。

实线与虚线序列

series 将实线实际流量与虚线目标结合。yMax 与 yTickCount 定义共享刻度。

圆角转折与完整坐标轴

cornerRadius={8} 使每个转折变圆,同时保留直线分段。showYAxis 与 showGrid 提供坐标参考;appearMotion 使完整图表立即显示。

API 参考

属性 类型 默认值 示例 描述
series LineChartSeries[] [] series={series} 图表序列数据;组件不内置模拟数据
xLabels string[] — xLabels={xLabels} 横坐标标签;未传时使用 ChartGroup.xLabels 或按数据点索引生成内部坐标标签
width number | string 800 width="Example" 图表整体宽度;支持 100%,内部按根层最终实测宽度重算几何
height number | string 400 height="Example" 图表整体高度;数字按 px 语义转为 rem
yMin number — yMin={42} 纵坐标最小值;未传时根据数据生成 nice domain,正数数据默认包含 0 默认行为:自动 / 继承 ChartGroup。
yMax number — yMax={42} 纵坐标最大值;自动时等于实际最大数据值,不向上取整 默认行为:自动 / 继承 ChartGroup。
yTicks number[] — yTicks={yTicks} 纵坐标刻度 默认行为:自动 nice ticks / 继承 ChartGroup。
yTickCount number — yTickCount={42} 未传 yTicks 时用于生成 nice ticks 的目标刻度数量
yTickFormatter (value: number) => string — yTickFormatter={(value) => { /* handle value */ }} 纵坐标格式化 默认行为:K 格式 / 继承 ChartGroup。
showXAxis boolean — showXAxis 是否显示横坐标
showYAxis boolean — showYAxis 是否显示纵坐标
showGrid boolean — showGrid 是否显示水平网格线
showGuides boolean — showGuides 是否允许序列绘制节点垂直辅助线
showHoverLabel boolean — showHoverLabel hover / focus 节点时是否显示数值 label;当 showHoverPanel=true 且未显式传入时实际渲染默认关闭 默认行为:按 showHoverPanel 推导。
alwaysShowHoverLabel boolean false alwaysShowHoverLabel 是否让数值 label 一直显示;与 showHoverPanel 同时开启时允许同时显示
adaptiveContrast boolean — adaptiveContrast 自适应黑白对比:按纯色宿主背景与同原点叠加柱体的明暗切换黑色数值和默认黑白节点、黑色折线;子图显式值优先,彩色序列与彩色节点不改色。明暗分界为 sRGB 灰度 0.5,随当前柱体形状和透明度变化;不支持背景图片或跨图坐标变换。默认开启,可显式关闭;由 Adaptive Contrast 共享能力实现。 默认行为:继承 ChartGroup,否则 true。
showHoverPanel boolean true showHoverPanel 是否开启 Chart hover 面板,内容按当前节点 / cell 自动生成;默认开启,hover / focus 时显示面板;设为 false 时回到数值 hover label,显式 showHoverLabel 优先
hoverPanelVariant ChartHoverPanelVariant "light" hoverPanelVariant={value} hover 面板视觉样式
hoverPanelPlacement ChartHoverPanelPlacement "pointer" hoverPanelPlacement={value} hover 面板定位;支持 anchor / pointer / pin 位置
showHoverPanelLabel boolean false showHoverPanelLabel 是否在 hover 面板顶部显示当前分类 label
hoverMode ChartGroupHoverMode — hoverMode={value} hover 命中模式;cell 时按分类点位中心左右半格生成整格命中区,并响应共享 hover
activeCellIndex number | null — activeCellIndex={42} 受控当前 hover 分类点位;未传时可继承 ChartGroup
onCellHoverChange (index: number | null) => void — onCellHoverChange={(value) => { /* handle value */ }} 分类点位 hover 变化回调
valueFormat NumberFormatOptions — valueFormat={value} 节点数值 label 的组件级数字格式;可设置 notation: "auto" / "compact" 使用英文 k/m/b/t 缩写 默认行为:NumberFormats 默认。
labelFormatter ( value: number, context: { series: LineChartSeries; point: NormalizedPoint; seriesIndex: number; pointIndex: number; }, ) => string — labelFormatter={(value) => { /* handle value */ }} 节点数值 label 自定义格式化;优先级高于全局、组件、序列和点级 valueFormat
xAxisMode LineChartXAxisMode — xAxisMode={value} 横坐标点位模式;edge 表示首尾数据点与首尾 label 中心都对齐到绘图区两端,cell 为分类 cell 中心
xLabelAutoCull boolean — xLabelAutoCull 是否根据完整 label 实测宽度自动减少横坐标 label;不删除数据点、路径或命中 cell
xMaxLabelCount number — xMaxLabelCount={42} 横坐标最多显示 label 数量;始终保留首尾,并按等步数减少中间 label 与对应数据点 默认行为:- / 继承 ChartGroup。
yLabelAutoCull boolean — yLabelAutoCull 是否根据纵向空间自动减少纵坐标 label
yMaxLabelCount number — yMaxLabelCount={42} 纵坐标最多显示 label 数量;未传 yTicks 时也会作为生成 nice ticks 的上限 默认行为:- / 继承 ChartGroup。
cornerRadius number | string 8 cornerRadius="Example" 圆角转折线的转角圆角半径;0 时为直线
colors (LineChartColor | undefined)[] — colors={colors} 调色板;空项回退当前 colorMode
colorMode LineChartColorMode "sequence" colorMode={value} Chart 通用颜色模式:默认色序、单色渐浅、单色
color LineChartColor — color={value} 单色模式主色;传入后同时作为 monochromeFade 与 monochrome 的默认颜色
monochromeColor LineChartColor "Primary" monochromeColor={value} monochromeFade 的单色来源;第一条序列为 100%,最后一条序列为 20%,中间按序列数量均匀递减
mutedMonochromeColor LineChartColor "Black4" mutedMonochromeColor={value} monochrome 的单色来源;默认所有未自定义序列为 4% 黑色本体颜色,描边透明度保持 100%
showBaseLayer boolean false showBaseLayer 是否显示最终尺寸的同色轮廓(影子 / 占位底层),默认不渲染;开启后以 4% 不透明度绘制,不参与出现动效,不改变真实图形、命中区域或时间轴。同时控制完整折线及 Area 底层,不关闭真实 Area 渐变。
appearMotion boolean true appearMotion 是否启用出现动效
appearOnView boolean true appearOnView 是否在触发锚点进入视口默认位置时自动播放出现动效;同源 iframe 中按最外层同源页面的真实位置判断
appearanceProgress number — appearanceProgress={42} 受控出现进度,范围 0..1;传入后组件只根据该进度渲染,不自行播放
defaultAppearanceProgress number 0 defaultAppearanceProgress={42} 非受控初始出现进度
appearanceDuration number — appearanceDuration={42} 自动播放总时长覆盖;未设置时每条序列自身绘制时长固定为 1000ms,多序列总完成时间会随 360ms stagger 增加
appearAnchorId string — appearAnchorId="Example" 动效触发锚点元素 ID;不传时使用图表自身根元素
appearAnchorPoint AnchorPoint "top" appearAnchorPoint={value} 使用锚点元素的顶端、中间或底部作为触发点
appearViewportPoint number | "top" | "center" | "bottom" 0.7 appearViewportPoint={42} 视口触发位置;0.7 表示视口高度 70%
scrollAppearance boolean | { distance?: number | string } false scrollAppearance={scrollAppearanceOptions} 是否启用滚动条时间轴控制出现动效;同源 iframe 同时响应外层页面滚动
scrollAppearanceDistance number | string 320 scrollAppearanceDistance="Example" 滚动时间轴从 0 到 1 对应的滚动距离
onAppearanceProgressChange (progress: number) => void — onAppearanceProgressChange={(value) => { /* handle value */ }} 出现进度变化回调
loading boolean — loading 数据等待状态。保持声明的画布尺寸、坐标轴和网格,将折线、面积和 marker 固定在出现动效起点并暂停交互;变为 false 后按当前视口条件播放出现动效。图表不渲染 Skeleton,也会读取上层 Frame 的 loading 上下文。
children Snippet — <LineChart>Content</LineChart> 图表主体后的自定义内容,无参数;不会替换坐标轴或数据系列。
class string "" class="my-component" 根层附加 class
style string "" style="width: 100%;" 根层附加 style
enableResponsive boolean true enableResponsive 是否启用 Frame responsive 能力
enableContext boolean true enableContext 是否启用 Frame context 能力
enableScaleObserver boolean false enableScaleObserver 是否启用 Frame scale observer
enableDefaultMotion boolean true enableDefaultMotion 是否启用 Frame 默认动效