Interaction
上一篇
SpreadSheet
下一篇
Store
Loading...
功能描述:交互类相关属性和方法。详情
s2.interaction.reset()
参数 | 说明 | 类型 |
---|---|---|
spreadsheet | 表格实例 | SpreadSheet |
interactions | 当前已注册的交互 | Map<string, BaseEvent> |
intercepts | 当前拦截的交互,防止不同交互之间冲突 (查看示例) | Set<Intercept> |
eventController | 事件控制器 | EventController |
destroy | 卸载所有交互实例,并重置为初始状态 | () => void |
reset | 重置所有交互 | () => void |
setState | 设置状态 | (data: InteractionStateInfo) => void |
getState | 获取当前状态 | () => void |
resetState | 重置为初始状态 | () => void |
clearState | 清空状态,并重绘 | () => void |
changeState | 更新状态 | (data: InteractionStateInfo) => void |
setInteractedCells | 设置当前发生改变的单元格 | (cell: S2CellType) => void |
getInteractedCells | 获取当前发生改变的单元格 | () => S2CellType[] |
getCurrentStateName | 获取当前状态名 | () => void |
isEqualStateName | 是否是相同的状态名 | (name: InteractionStateName) => boolean |
isSelectedState | 是否是选中状态 | () => boolean |
isBrushSelectedState | 是否是刷选状态 | () => boolean |
isHoverState | 是否是悬停状态 | () => boolean |
isHoverFocusState | 是否是悬停聚焦状态 (悬停在单元格 focusTime : 默认 800ms 后) | () => boolean |
isSelectedCell | 是否是选中的单元格 | (cell: S2CellType) => boolean |
isActiveCell | 是否是激活的单元格 | (cell: S2CellType) => boolean |
getCells | 获取当前 interaction 记录的 Cells 元信息列表,包括不在可视范围内的单元格 | () => Partial<ViewMeta>[] |
getActiveCells | 获取当前在可视区域的单元格实例 | () => S2CellType[] |
clearStyleIndependent | 清除单元格交互样式 | () => void |
getActiveDataCells | 获取当前在可视区域的数值单元格实例 | () => S2CellType[] |
getActiveRowCells | 获取当前在可视区域的行头单元格实例 | () => S2CellType[] |
getActiveColCells | 获取当前在可视区域的列头单元格实例 | () => S2CellType[] |
clearStyleIndependent | 清除单元格样式 | () => void |
getUnSelectedDataCells | 获取可视区域内选中的数值单元格 | () => DataCell[] |
getAllCells | 获取所有可视区域内的单元格 | () => S2CellType[] |
selectAll | 选中所有单元格 | () => void |
hideColumns | 隐藏列 (forceRender 为 false 时,隐藏列为空的情况下,不再触发表格更新) | (hiddenColumnFields: string[], forceRender?: boolean = true) => void |
mergeCells | 合并单元格 | (cellsInfo?: MergedCellInfo[], hideData?: boolean) => void |
unmergeCell | 取消合并单元格 | (removedCell: MergedCell) => void |
updateAllDataCells | 更新所有数值单元格 | () => void |
updateCells | 更新指定单元格 | (cells: S2CellType[]) => void |
addIntercepts | 新增交互拦截 | (interceptTypes: InterceptType[]) => void |
hasIntercepts | 是否有指定拦截的交互 | (interceptTypes: InterceptType[]) => boolean |
removeIntercepts | 移除指定交互拦截 | (interceptTypes: InterceptType[]) => void |
highlightNodes | 高亮节点对应的单元格 | (nodes: Node[], stateName: InteractionStateName) => void |
scrollTo | 滚动至指定位置 | (offsetConfig: ScrollOffsetConfig) => void |
scrollToNode | 滚动至指定单元格节点 | (node: Node, options?: CellScrollToOptions) => void |
scrollToCell | 滚动至指定单元格 | (cell: S2CellType, options?: CellScrollToOptions) => void |
scrollToCellById | 滚动至指定单元格 id 对应的位置,如果不在可视化范围内,则会自动滚动 | (id: string, options?: CellScrollToOptions) => void |
scrollToTop | 滚动至顶部 | (options?: CellScrollToOptions) => void |
scrollToRight | 滚动至右边 | (options?: CellScrollToOptions) => void |
scrollToBottom | 滚动至底部 | (options?: CellScrollToOptions) => void |
scrollToLeft | 滚动至左边 | (options?: CellScrollToOptions) => void |
highlightCell | 高亮指定单元格(可视范围内) | (cell: S2CellType) => void |
selectCell | 选中指定单元格(可视范围内) | (cell: S2CellType, options: ChangeCellOptions) => void |
changeCell | 改变指定单元格状态(可视范围内)(如:选中/高亮/多选等) | (cell: S2CellType, options: ChangeCellOptions) => void |
updateDataCellRelevantHeaderCells | 高亮数值单元格和所对应行列单元格 | (stateName: InteractionStateName, meta: ViewMeta) => void |
updateDataCellRelevantRowCells | 高亮数值单元格和所对应行头单元格 | (stateName: InteractionStateName, meta: ViewMeta) => void |
updateDataCellRelevantColCells | 高亮数值单元格和所对应列头单元格 | (stateName: InteractionStateName, meta: ViewMeta) => void |
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
linkFields | 标记字段为链接样式,用于外链跳转 | string[] | (meta: Node | ViewMeta) => boolean | ||
selectedCellsSpotlight | 是否开启选中高亮聚光灯效果 | boolean | false | |
hoverHighlight | 鼠标悬停时高亮当前单元格,以及所对应的行头,列头 | boolean | true | |
hoverFocus | 鼠标悬停在当前单元格超过默认 800ms 后,保持当前高亮,显示 tooltip,悬停时间通过设置 duration 来控制 | boolean | {duration: number} | true | |
hiddenColumnFields | 用于配置默认隐藏的列,透视表 和多列头明细表 需要配置列头唯一 id, 单列头明细表 配置列头 field 字段即可 (即:s2DataConfig.fields.columns ). 了解更多 | string[] | ||
copy | 单元格复制配置 | Copy | ||
customInteractions | 自定义交互 详情 | CustomInteraction[] | ||
scrollSpeedRatio | 用于控制滚动速率,分水平和垂直两个方向,默认为 1 | ScrollSpeedRatio | ||
autoResetSheetStyle | 用于控制点击表格外区域和按下 ESC 键时是否重置交互状态和关闭 Tooltip, 支持根据 event 动态判断 | boolean | (event: Event | FederatedPointerEvent, spreadsheet: SpreadSheet) => boolean | true | |
resize | 用于控制 resize 热区是否显示 | boolean | ResizeInteractionOptions | true | |
brushSelection | 是否允许单元格(包含行头,列头,数值单元格)刷选。行头,列头刷选只支持透视表 | boolean | BrushSelection | true | |
multiSelection | 是否允许多选 (包含行头,列头,数值单元格) | boolean | true | |
rangeSelection | 是否允许区间快捷多选 | boolean | true | |
scrollbarPosition | 用于控制滚动条展示在内容区边缘还是画布边缘 | content | canvas | content | |
eventListenerOptions | 事件监听函数 addEventListener 的 可选项配置, 可控制事件从冒泡阶段还是捕获阶段触发 | false | ||
selectedCellHighlight | 选中数值单元格后的行列高亮联动 rowHeader:选中数值单元格后高亮对应行头 colHeader:选中数值单元格后高亮对应列头 currentRow:选中数值单元格后高亮整行 currentCol:选中数值单元格后高亮整列 true:同 { rowHeader: true, colHeader: true, currentRow: true, currentCol: true } | boolean | { rowHeader?: boolean, colHeader?: boolean, currentRow?: boolean, currentCol?: boolean } | false | |
overscrollBehavior | 控制滚动至边界的行为,可禁用浏览器的默认滚动行为。详情 | auto | contain | none | null | auto |
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
enable | 是否允许复制 | boolean | true | |
withFormat | 是否使用 s2DataConfig 的 formatter 格式复制数据 | boolean | true | |
withHeader | 复制数据是否带表头信息 | boolean | false | |
customTransformer | 复制时支持自定义 (transformer) 数据格式化方法 | (transformer: Transformer) => Partial<Transformer> | transformer |
功能描述:自定义交互,继承 BaseEvent: 查看示例
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
key | 交互的唯一标识 | string | ✓ | |
interaction | 交互实例 | InteractionConstructor | ✓ |
功能描述:滚动速率配置。查看示例
interface ScrollSpeedRatio {horizontal?: number; // 水平滚动速率,默认为 1vertical?: number; // 垂直滚动速率,默认为 1}
功能描述:宽高调整配置。查看示例
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
rowCellVertical | 是否开启行头垂直方向 resize 热区 | boolean | true | |
cornerCellHorizontal | 是否开启角头水平方向 resize 热区 | boolean | true | |
colCellHorizontal | 是否开启列头水平方向 resize 热区 | boolean | true | |
colCellVertical | 是否开启列头垂直方向 resize 热区 (列头隐藏时该配置无效) | boolean | true | |
rowResizeType | 用于控制行高 resize 时的生效范围 1. all : 对所有单元格生效(会覆盖默认的行高配置),2. current : 对当前单元格生效,3. selected : 对当前单元格生效,如果单元格是多选状态,调整任意选中单元格,对所有选中的生效。 | all | current | selected | current | |
colResizeType | 用于控制列宽 resize 时的生效范围 1. all : 对所有单元格生效(会覆盖默认的列宽配置),2. current : 对当前单元格生效,3. selected : 对当前单元格生效,如果单元格是多选状态,调整任意选中单元格,对所有选中的生效。 | all | current | selected | current | |
disable | 用于控制行高 resize 是否生效。查看示例 | (resizeInfo: S2CellType) => boolean | ||
visible | 自定义当前单元格是否显示 resize 热区 | (cell: S2CellType) => boolean | ||
minCellWidth | 单元格可拖拽最小宽度 | number | 40 | |
minCellHeight | 单元格可拖拽最小高度 | number | 20 |
功能描述:单元格刷选配置。查看示例
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
dataCell | 是否允许数值单元格刷选 | boolean | true | |
rowCell | 是否允许行头单元格刷选(仅支持透视表) | boolean | false | |
colCell | 是否允许列头单元格刷选 | boolean | false |
功能描述:单元格选中信息明细。
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
interactionName | 触发选中的交互名 | InteractionName | ||
targetCell | 触发选中的单元格 | S2CellType | ||
event | 触发选中的事件对象 | FederatedPointerEvent | Event | KeyboardEvent |
功能描述:交互拦截类型。
enum InterceptType {HOVER = 'hover',CLICK = 'click',DATA_CELL_BRUSH_SELECTION = 'dataCellBrushSelection',ROW_CELL_BRUSH_SELECTION = 'rowCellBrushSelection',COL_CELL_BRUSH_SELECTION = 'colCellBrushSelection',MULTI_SELECTION = 'multiSelection',RESIZE = 'resize',}
功能描述:交互名称。
enum InteractionName {CORNER_CELL_CLICK = 'cornerCellClick',DATA_CELL_CLICK = 'dataCellClick',ROW_CELL_CLICK = 'rowCellClick',COL_CELL_CLICK = 'colCellClick',MERGED_CELLS_CLICK = 'mergedCellsClick',ROW_COLUMN_CLICK = 'rowColumnClick',HEADER_CELL_LINK_CLICK = 'headerCellLinkClick',HOVER = 'hover',DATA_CELL_BRUSH_SELECTION = 'dataCellBrushSelection',ROW_CELL_BRUSH_SELECTION = 'rowCellBrushSelection',COL_CELL_BRUSH_SELECTION = 'colCellBrushSelection',COL_ROW_RESIZE = 'rowColResize',DATA_CELL_MULTI_SELECTION = 'dataCellMultiSelection',ROW_CELL_MULTI_SELECTION = 'rowCellMultiSelection',COL_CELL_MULTI_SELECTION = 'colCellMultiSelection',RANGE_SELECTION = 'rangeSelection',SELECTED_CELL_MOVE = 'selectedCellMove',GLOBAL_RESET = 'globalReset',}
功能描述:交互状态名称。
enum InteractionStateName {ALL_SELECTED = 'allSelected',SELECTED = 'selected',ROW_CELL_BRUSH_SELECTED = 'rowCellBrushSelected',COL_CELL_BRUSH_SELECTED = 'colCellBrushSelected',DATA_CELL_BRUSH_SELECTED = 'dataCellBrushSelected',UNSELECTED = 'unselected',HOVER = 'hover',HOVER_FOCUS = 'hoverFocus',HIGHLIGHT = 'highlight',SEARCH_RESULT = 'searchResult',PREPARE_SELECT = 'prepareSelect',}
功能描述:单元格类型。
enum CellType {DATA_CELL = 'dataCell',ROW_CELL = 'rowCell',COL_CELL = 'colCell',SERIES_NUMBER_CELL = 'seriesNumberCell',CORNER_CELL = 'cornerCell',MERGED_CELL = 'mergedCell',}
export interface CellScrollToOptions {/*** 是否展示滚动动画*/animate?: boolean;/*** 是否触发滚动事件*/skipScrollEvent?: boolean;}
export interface ChangeCellOptions {/*** 目标单元格*/cell: S2CellType<ViewMeta>;/*** 是否是多选*/isMultiSelection?: boolean;/*** 状态名 (默认 `selected`)*/stateName?: InteractionStateName;/*** 如果单元格不在可视范围,是否自动滚动*/scrollIntoView?: boolean;}
export interface ScrollOffsetConfig {skipScrollEvent?: boolean;rowHeaderOffsetX?: {value: number | undefined;animate?: boolean;};offsetX?: {value: number | undefined;animate?: boolean;};offsetY?: {value: number | undefined;animate?: boolean;};}
export interface ScrollOffset {scrollX?: number;scrollY?: number;rowHeaderScrollX?: number;}
export type InteractionConstructor = new (spreadsheet: SpreadSheet,) => BaseEvent;
export abstract class BaseEvent {public spreadsheet: SpreadSheet;constructor(spreadsheet: SpreadSheet) {this.spreadsheet = spreadsheet;this.bindEvents();}public abstract bindEvents(): void;}
type S2CellType<T extends SimpleBBox = ViewMeta> =| DataCell| HeaderCell| ColCell| CornerCell| RowCell| SeriesNumberCell| MergedCell| TableDataCell| TableCornerCell| TableSeriesNumberCell| BaseCell<T>;
interface ChangeCellOptions {/*** 目标单元格*/cell: S2CellType<ViewMeta>;/*** 是否是多选*/isMultiSelection?: boolean;/*** 状态名*/stateName?: InteractionStateName;/*** 交互名*/interactionName?: `${InteractionName}`;/*** 如果单元格不在可视范围,是否自动滚动*/scrollIntoView?: boolean;}
interface MergedCellInfo {colIndex?: number;rowIndex?: number;showText?: boolean;}
interface CellMeta {id: string;colIndex: number;rowIndex: number;type: CellType;rowQuery?: Record<string, any>;[key: string]: unknown;}
interface InteractionStateInfo {stateName?: InteractionStateName;cells?: CellMeta[];interactedCells?: S2CellType[];nodes?: Node[];force?: boolean;}
参数 | 说明 | 类型 |
---|---|---|
spreadsheet | 表格实例 | SpreadSheet |
canvasEventHandlers | 当前已注册的交互 | EventHandler[] |
s2EventHandlers | 当前已注册的交互 | S2EventHandler[] |
domEventListeners | 当前已注册的交互 | EventHandler[] |
isCanvasEffect | 是否是图表内部引起的事件 | boolean |
canvasMousemoveEvent | 表格鼠标移动事件 | FederatedPointerEvent |
isMatchElement | 是否是表格内部的元素 | (event: MouseEvent) => boolean |
isMatchPoint | 是否是表格内部的坐标 | (event: MouseEvent) => boolean |
bindEvents | 绑定交互事件 | () => void |
clear | 清空交互事件 | () => void |
getViewportPoint | 获取表格内的鼠标坐标 (兼容 supportsCSSTransform ) | (event: MouseEvent | PointerEvent | WheelEvent) => PointLike |
interface EventListener {target: EventTarget;type: string;handler: EventListenerOrEventListenerObject;options?: AddEventListenerOptions | boolean;}
interface S2EventHandler {type: keyof EmitterType;handler: EmitterType[keyof EmitterType];}
interface EventHandler {type: string;handler: (event: FederatedPointerEvent) => void;}
功能描述:数值单元格数据和位置等信息
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
spreadsheet | SpreadSheet | 表格实例 | ||
id | string | 单元格唯一标识 | ||
x | number | 单元格 x 坐标 | ||
y | number | 单元格 y 坐标 | ||
width | number | 单元格宽度 | ||
height | number | 单元格高度 | ||
data | ViewMetaData | 单元格数据 | ||
rowIndex | number | 单元格在行叶子节点中的索引 | ||
colIndex | number | 单元格在列叶子节点中的索引 | ||
valueField | string | 度量 id | ||
fieldValue | DataItem | 度量展示的真实值 | ||
isTotals | boolean | 是否为总计:true 为总计 false 为小计 | ||
query | Record<string, any> | 行列查询条件 | ||
rowQuery | Record<string, any> | 行查询条件 | ||
colQuery | Record<string, any> | 列查询条件 | ||
rowId | string | 单元格的行 id | ||
colId | string | 单元格的列 id |
type RawData = Record<string, DataItem>;
type SimpleData = string | number | null | undefined;
功能描述:用于支持多指标类型的自定义数据单元格渲染。例如:趋势分析表
配置项名称 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
values | 格式化后的数据,直接展示在 dataCfg 中 | SimpleData[][] | ✓ | |
originalValues | 原始数据,用于原始数据导出 | SimpleData[][] | ||
label | 用作单元格小标题,单独占一行展示 | string | ||
[key: string] | 其他透传字段,用于自定义单元格的定制化展示 | unknown | `` |
{"number": {"originalValues": [1, 2, 3],"values": ["1", "2", "3"]}}
SimpleData | MultiData | MiniChartData
type DataItem = SimpleData | MultiData | MiniChartData | Record<string, unknown>;
{"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"}
import type { EXTRA_FIELD, VALUE_FIELD } from '@antv/s2';type ExtraData = {[EXTRA_FIELD]: string;[VALUE_FIELD]: string | DataItem;};
{"$$extra$$": "number","$$value$$": 7789,}
type Data = RawData & ExtraData;
CellData
定义type ViewMetaData = Data | CellData;
{"city": "杭州市"}
{"extraField": "number","raw": {"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"},"$$extra$$": "number","$$value$$": 7789,"$$origin$$": {"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"}}
功能描述:在单元格内绘制 mini
图(支持 折线图、子弹图、柱状图). 查看 文档 和 示例
功能描述:内置折线图、柱状图数据配置项,数据格式参考 G2
参数 | 说明 | 类型 | 必选 | 默认值 |
---|---|---|---|---|
type | mini 图类型 | line | bar | ✓ | |
encode | 编码方式,声明 x 位置通道或 y 位置通道绑定的对应的列数据 | {x: string; y: string} | ✓ | |
data | 原始数据 | Data[] | ✓ | |
[key: string] | 其他透传字段,用于自定义单元格的定制化展示 | unknown |
功能描述:内置子弹图数据配置项
参数 | 说明 | 类型 | 必选 | 默认值 |
---|---|---|---|---|
type | mini 图类型 | bullet | ✓ | bullet |
measure | 当前指标 | number | string | ✓ | |
target | 目标值 | number | string | ✓ | |
[key: string] | 其他透传字段,用于自定义单元格的定制化展示 | unknown |