跳到主要内容

APIs

本节内容为时间轴范式组件的 APIs 文档。

实时调试预览​

Timeline​

new Timeline()​

  • new Timeline(dom, option)

  • 参数

    名称类型是否可选默认值描述
    domstring | HTMLElementDOM 容器
    optionOption配置项

创建一个时间轴组件实例。

const timeline = new Timeline('#timeline', {
  data: [2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022],
  theme: 'mobile',
  config: {
    animation: {
      intervalTime: 1e3,
    },
  },
});

实例 API​

动画控制​

isPlaying()​

  • isPlaying()

是否在播放中。

play()​

  • play(dataIndex?)

  • 参数

    名称类型是否可选默认值描述
    dataIndexnumber是数据索引

开始播放，播放到最后一个数据时，会自动暂停，不会重新从头开始播放。

注意

没有传 dataIndex 参数时，会从下一个索引处开始播放，若当前已处于最大索引处，则从小索引开始播放；传了 dataIndex 参数时，先跳到指定时间节点（索引处），再开始播放。

pause()​

  • pause()

暂停播放。

update()​

  • update(dataIndex)

  • 参数

    名称类型是否可选默认值描述
    dataIndexnumber数据索引

直接跳到某个时间节点并暂停。

范围播放​

getCurrentIndex()​

  • getCurrentIndex(): number

v0.0.2+

获取当前数据索引位置。

getIndexRange()​

  • getIndexRange(): [number, number]

v0.0.2+

获取数据索引区间，开闭 [,)。

setIndexRange()​

  • setIndexRange(indexRange)

  • 参数

    名称类型是否可选默认值描述
    indexRange[number, number]数据索引区间

v0.2.7+

设置数据索引区间，开闭 [,)。

注意

如果当前位置的索引不在设置的范围内，则自动跳到最大索引处并暂停播放。

倍速​

getSpeed()​

  • getSpeed(): string

v0.2.0+

获取播放速度（倍速）。

setSpeed()​

  • setSpeed(speed)

  • 参数

    名称类型是否可选默认值描述
    speed"0.5" | "0.75" | "1" | "1.25" | "1.5" | "2"播放速度

v0.2.0+

设置播放速度（倍速）。

其它​

destroy()​

  • destroy()

销毁组件实例，释放资源。

resize()​

  • resize()

视图自适应。

dispatchAction()​

  • dispatchAction(actionType)

  • 参数

    名称类型是否可选默认值描述
    actionType'play' | 'replay' | 'pause' | 'previous' | 'next'行为类型

通过 API 方式主动触发动作交互。

on()​

  • on(name, handler): Timeline

  • 参数

    名称类型是否可选默认值描述
    nameEventName事件类型
    handlerevent => void事件回调

绑定事件。

off()​

  • off(name, handler): Timeline

  • 参数

    名称类型是否可选默认值描述
    nameEventName事件类型
    handlerevent => void事件回调

取消绑定事件。

事件​

事件类型。

// 绑定事件
timelineIns.on('change', (event) => {});
// 取消绑定事件
timelineIns.off('change', (event) => {});

play​

  • 'play'

  • 事件对象

    type Event = {
      type: 'play';
      index: number;
      timeData: TimeDataItem;
      speed: number;
    };

播放事件。

pause​

  • 'pause'

  • 事件对象

    type Event = {
      type: 'pause';
      index: number;
      timeData: TimeDataItem;
      speed: number;
      /** 主动的交互行为导致暂停的原因 */
      causeBy:
        | 'apiUpdate'
        | 'apiSetIndexRange'
        | 'pause'
        | 'previous'
        | 'next'
        | 'axisClick'
        | 'axisMarkerDrag';
    };

暂停事件。

change​

  • 'change'

  • 事件对象

    type Event = {
      type: 'change';
      index: number;
      timeData: TimeDataItem;
      speed: number;
      /** v0.1.0+ 引起时间轴变化的原因 */
      causeBy:
        | 'apiUpdate'
        | 'apiSetIndexRange'
        | 'play'
        | 'previous'
        | 'next'
        | 'axisClick'
        | 'axisMarkerDrag';
      /** 交互 id，用来区分多次连续的交互行为 */
      actionId?: string;
    };

当前数据索引变动（配合图表播放）事件。

changeRange​

  • 'changeRange'

  • 事件对象

    type Event = {
      type: 'changeRange';
      index: number;
      timeData: TimeDataItem;
      speed: number;
      indexRange: [number, number];
    };

v0.0.2+

数据索引区间变动事件，开闭 [,)。

changeSpeed​

  • 'changeSpeed'

  • 事件对象

    type Event = {
      type: 'changeSpeed';
      index: number;
      timeData: TimeDataItem;
      speed: number;
    };

v0.2.0+

改变播放速度（倍速）事件。