DynamicDvMarkerHelper

DynamicDvMarkerHelper

目前的 standard-chart 为单次渲染模式，两次渲染间的状态不能做记录，所以框架为折线与时间轴的联动做了一个辅助类LineTimeLineHelper

DynamicDvMarkerHelper 初始化

lineTimeLineHelper 初始化需要在生命周期 dv:afterinit 的钩子函数中实现

chart.on('dv:afterinit', () => {
    // 以下为lineTimeLineHelper的默认实例化配置
    const markerHelper = new StandardChart.DynamicDvMarkerHelper(chart: StandardChart， opts?: StateTransitionConfig);
})

初始化参数

参数配置	类型	默认值	描述	备注
chart	StandardChart	无	动态折线图的实例对象
opts	StateTransitionConfig	见下方StateTransitionConfig 类型结构即默认值	自定义标记的初始化参数	可选传

StateTransitionConfig 类型结构即默认值

// 标记包含的状态
interface ElementStates {
  hide: ElemmentStateProps;
  show: ElemmentStateProps;
}

export interface StateTransitionConfig {
  stateAnimationConfig?: ElementAnimateConfig;
  states: ElementStates;
}

const defaultStateTransitionConfig: StateTransitionConfig = {
  states: {
  // 隐藏状态对应的图形参数
    hide: {
      y: 10,
      style: {
        opacity: 0
      }
    },
  // 显示状态对应的图形参数
    show: {
      style: {
        opacity: 1
      }
    }
  },
  // 状态转移时的动画的参数
  stateAnimationConfig: {
    duration: 250,
    delay: 0
  }
};

DynamicDvMarkerHelper.showOrHide

/**
   *
   * @param state 要转换的状态
   * @param markerIndex 当前marker系列在所有marker系列中的序号
   * @param categoryIndex x轴的索引
   * @param isStream 是否开启流水线式显示，即下一个标记显示之前，隐藏上一个标价，最后一个标记显示时，全部标记都显示.
   * @description isStream仅在state为show时有效。
   * @default isStream = true
   * @returns 返回状态改变的标记在状态表中的序号， 找不到或没有标记状态改变时返回-1.
   */
showOrHide( state: 'hide' | 'show', markerIndex: number, categoryIndex: number, isStream = true ): number {
}

DynamicDvMarkerHelper.show

show 方法时 showOrHide 方法的简单调用。

  /**
   * 显示某个x轴序号上的所有标记
   * @param categoryIndex x轴索引
   * @param isStream 是否开启流水线式显示，即下一个标记显示之前，隐藏上一个标价，最后一个标记显示时，全部标记都显示.
   * @param all 是否显示全部
   * @param showHandler 当前marker系列哪些需要显示的标记的处理函数,返回一个标记的索引数组
   * @param hideHandler 当前marker系列哪些需要隐藏的标记的处理函数,返回一个标记的索引数组
   * @default
   * isStream = true
   * all = false
   */
DynamicDvMarkerHelper.show(categoryIndex: number, isStream = true, all = false, showHandler: () => number[],
    hideHandler: () => number[]) {
}

showHandler/hideHandler 的参数列表

showHandler/hideHandler:
(
  // 本次状态转移的目标状态
  state: 'show' | 'hide',
  // 当前x坐标的前一个标记在自定义标记系列的索引
  markIndex: number,
  // 当前自定义标记系列在标记状态列表中的索引
  markerIndex: number,
  // 传入的x坐标索引
  categoryIndex: number,
  // 整个图表的标记状态列表的克隆对象
  markerStates: MarkStates[]
)
// 返回需要显示的标记在其对应的自定义标记系列中的索引
=> number[]