Skip to content

技术指标

本文档介绍了图表内置的技术指标和如何自定义一个技术指标。

内置技术指标

指标名默认计算参数指标名默认计算参数指标名默认计算参数
MA[5, 10, 30, 60]BIAS[6, 12, 24]VR[24, 30]
EMA[6, 12, 20]BRAR[26]WR[6, 10, 14]
SMA[12, 2]CCI[13]MTM[6, 10]
BBI[3, 6, 12, 24]DMI[14, 6]EMV[14, 9]
VOL[5, 10, 20]CR[26, 10, 20, 40, 60]SAR[2, 2,  20]
MACD[12, 26, 9]PSY[12, 6]AO[5, 34]
BOLL[20, 2]DMA[10, 50, 10]ROC[12, 6]
KDJ[9, 3, 3]TRIX[12, 20]PVT
RSI[6, 12, 24]OBV[30]AVP

自定义技术指标

创建一个自定义技术指标,只需要生成一个技术指标信息,然后通过klinecharts.registerIndicator全局添加,添加到图表即可和内置技术指标一样去使用。

属性说明

typescript
{
  // 指标名
  name: string
  // 指标简短名称,用于显示,缺省将显示name
  shortName?: string
  // 精度,默认为4
  precision?: number
  // 计算参数
  calcParams?: any[]
  // 是否需要ohlc
  shouldOhlc?: boolean
  // 是否需要格式化大数据值,从1000开始格式化,比如100000是否需要格式化100K
  shouldFormatBigNumber?: boolean
  // 是否可见
  visible?: boolean
  // 层级
  zLevel?: number
  // 扩展数据
  extendData?: any
  // 系列,默认为'normal'
  series?: 'normal' | 'price' | 'volume'
  // 数据信息
  figures?: Array<{
    // 用于取计算结果中值
    key: string
    // 用于tooltip显示
    title?: string
    // 图形类型
    type?: string
    // 基准值,如果给定,将以这个值上下去绘制,一般用于type是'rect'
    baseValue?: number
    // 是一个方法,用于生成自定义图形的属性,
    attrs?: ({
      data: IndicatorFigureAttrsCallbackData
      coordinate: IndicatorFigureAttrsCallbackCoordinate
      bounding: Bounding
      barSpace: BarSpace
      xAxis: XAxis
      yAxis: YAxis
    }) => IndicatorFigureAttrs
    // 是一个方法,用于生成样式
    styles?: (
      data: {
        // 上一个图形的数据
        prev: {
          // k线数据,类型参阅[数据源]
          kLineData?: KLineData
          // 技术指标数据
          indicatorData?: any
        }
        // 当前图形的数据
        current: {
          kLineData?: KLineData
          indicatorData?: any
        }
        // 下一个图形的数据
        next: {
          kLineData?: KLineData
          indicatorData?: any
        }
      },
      // 技术图表实例
      indicator: Indicator
      // 默认的技术指标样式,即全局设置的技术指标样式,参阅[样式]中的indicator
      defaultStyles: IndicatorStyle
    ) => IndicatorFigureStyle
  }>
  // 指定的最小值,默认null
  minValue?: number
  // 指定的最大值,默认null
  maxValue?: number
  // 样式,支持增量,默认为null,类型参阅[样式]中的indicator
  styles?: IndicatorStyle
  // 计算方法,可以是一个promise
  calc: (
    // 数据源,类型参阅[数据源]
    dataList: KLineData[],
    // 技术指标实例
    indicator: Indicator
  ) => Promise<Array<any>> | Array<any>
  // 重新生成数图形配置方法,会在计算参数发生变化后触发,返回类型参阅figures,默认为null
  regenerateFigures?: (
    // 计算参数
    calcParms: any[]
  ) => Array<IndicatorFigure<D>>
  // 创建自定义提示文字
  createTooltipDataSource?: (params: {
    // 数据源,类型参阅[数据源]
    kLineDataList: KLineData[]
    // 技术指标实例
    indicator: Indicator
    // 可见区域信息
    visibleRange: {
      // 起点数据索引
      from: number
      // 终点数据索引
      to: number
      // 实际起点数据索引
      realFrom: number
      // 实际终点数据索引
      realTo: number
    },
    // 窗口尺寸信息
    bounding: {
      // 宽
      width: number
      // 高
      height: number
      // 距离左边距离
      left: number
      // 距离右边距离
      right: number
      // 距离顶部距离
      top: number
      // 距离底部距离
      bottom: number
    },
    // 十字光标的信息
    crosshair: {
      // 十字光标交叉点所在的窗口id
      paneId?: string
      // 真实的x坐标
      realX?: number
      // k线数据,类型参阅[数据源]
      kLineData?: KLineData
      // 数据索引
      dataIndex?: number
      // 真实数据索引
      realDataIndex?: number
    }
    // 默认的技术指标样式,即全局设置的技术指标样式,参阅[样式]中的indicator
    defaultStyles: IndicatorStyle
    // x轴组件,内置一些转换方法
    xAxis: XAxis
    // y轴组件,内置一些转换方法
    yAxis: YAxis
  }) => ({
    // 名字
    name?: string
    // 计算参数文字,如果name无值,则不会显示
    calcParamsText?: string
    // 值信息
    values?: Array<{
      title: string | {
        text: string
        color: string
      }
      value: string | {
        text: string
        color: string
      }
    }>
  }),
  // 自定义绘制,如果返回true,则figures配置的图形不会绘制
  draw?: (params: {
    // 画布上下文
    ctx: CanvasRenderingContext2D
    // 数据源,类型参阅[数据源]
    kLineDataList: KLineData[]
    // 技术指标实例
    indicator: Indicator
    // 可见区域信息
    visibleRange: {
      // 起点数据索引
      from: number
      // 终点数据索引
      to: number,
      // 实际起点数据索引
      realFrom: number
      // 实际终点数据索引
      realTo: number
    },
    // 窗口尺寸信息
    bounding: {
      // 宽
      width: number
      // 高
      height: number
      // 距离左边距离
      left: number
      // 距离右边距离
      right: number
      // 距离顶部距离
      top: number
      // 距离底部距离
      bottom: number
    },
    // 蜡烛柱的尺寸信息
    barSpace: {
      // 蜡烛柱尺寸
      bar: number
      halfBar: number
      // 蜡烛柱不包含蜡烛柱之间间隙的尺寸
      gapBar: number
      halfGapBar: number
    },
    // 默认的技术指标样式,即全局设置的技术指标样式,参阅[样式]中的indicator
    defaultStyles: IndicatorStyle
    // x轴组件,内置一些转换方法
    xAxis: XAxis
    // y轴组件,内置一些转换方法
    yAxis: YAxis
  }) => boolean
}

示例

以一个名为'MA'技术指标,介绍如何去做自定义技术指标。

步骤一

首先确定计算参数(calcParams)和配置项(figures),'MA'技术指标需要展示两个周期的收盘价平均值连起来的线,一条为'ma1',一条名为'ma2'。因此figures配置为:

javascript
{
  // 计算参数是2个,一个计算5个周期时间的均值,即'ma1',另一个计算10个周期时间的均值,即'ma10'
  calcParams: [5, 10],
  figures: [
    // 第一条线'ma5'
    { key: 'ma1', title: 'MA5: ', type: 'line' },
    // 第二条线'ma10'
    { key: 'ma2', title: 'MA10: ', type: 'line' }
  ]
}

步骤二

确定其它属性

javascript
{
  name: 'MA',
  shortName: 'MA',
  calcParams: [5, 10],
  figures: [
    { key: 'ma1', title: 'MA5: ', type: 'line' },
    { key: 'ma2', title: 'MA10: ', type: 'line' }
  ],
  // 当计算参数改变时,希望提示的和参数一样,即title的值需要改变
  regenerateFigures: (params) => {
    return params.map((p, i) => {
      return { key: `ma${i + 1}`, title: `MA${p}: `, type: 'line' }
    })
  },
  // 计算结果
  calc: (kLineDataList, { calcParams, figures }) => {
    // 注意:返回数据个数需要和kLineDataList的数据个数一致,如果无值,用{}代替即可。
    // 计算参数最好取回调参数calcParams,如果不是,后续计算参数发生变化的时候,这里计算不能及时响应
    const closeSums = []
    return kLineDataList.map((kLineData, i) => {
      const ma = {}
      const close = kLineData. close
      calcParams.forEach((param, j) => {
        closeSums[j] = (closeSums[j] || 0) + close
        if (i >= param - 1) {
          ma[figures[j].key] = closeSums[j] / param
          closeSums[j] -= kLineDataList[i - (param - 1)].close
        }
      })
      // 如果有值的情况下,这里每一项的数据格式应该是 { ma1: xxx, ma2: xxx }
      // 每个key需要和figures中的子项key对应的值一致
      return ma
    })
  }
}

这样一个自定义指标就完成了。