实例 API

getDom(paneId, position)

typescript

(paneId?: string, position?: 'root' | 'main' | 'yAxis') => HTMLElement;

获取 dom 容器。

paneId 窗口 id，缺省则是整个图表容器
position 可选项为'root'，'main'和'yAxis'，缺省则是'root'

getPaneById(paneId)

typescript

(paneId?: string) => Pane;

获取 Pane 对象。

paneId 窗口 id，缺省则为主图 Pane

getYAxisRangeInfo(paneId)

typescript

(paneId?: string) => {
  max: number;
  min: number;
  range: number;
  realMin: number;
  realMax: number;
  realRange: number;
};

获取 YAxis 的数据范围信息。

paneId 窗口 id，缺省则为主图 Pane

getSize(paneId, position)

typescript

(paneId?: string, position?: 'root' | 'main' | 'yAxis') => {
  width: number;
  height: number;
  left: number;
  top: number;
  right: number;
  bottom: number;
};

获取尺寸。

paneId 窗口 id，缺省则是整个图表容器
position 位置，支持root，main，yAxis，缺省则是root

setPanelHeight(paneId, Height)

typescript

(paneId: string, Height: number) => void;

修改 panel 高度（目前仅支持副图-指标图），增大副图会缩小主图。

paneId 窗口 id
Height 高度，最大值为副图高度+当前主图高度-图最小高度，图最小高度(默认为 30)

setStyles(styles)

typescript

(styles: string | object) => void

设置样式配置。

styles 样式配置，可以是通过registerStyles注册进去的样式名。当是对象时，详情可参阅样式，支持合并。

getStyles()

typescript

() => object;

获取样式配置，返回完整类型参阅样式。

setPrePrice(prePrice):void

typescript

(styles: number) => void

设置昨收价，注意设置时若需要 Y 轴默认按照昨收价居中，还需在 styles 的 YAxis 中配置preInCenter为true。

prePrice 昨收价
仅在分时图样式中使用
此处的'分时图样式'指的是在一屏内展示全部数据的样式，因为若存在横向滚动 or 缩放动作时，设置昨收价后会干扰百分比 Y 轴格式下某些坐标转换 API。

getPrePrice()

typescript

() => number | null;

获取昨收价，若未设置则返回null。

setDateFormat(dateFormat)

typescript

(format: string | {
      Tooltip: 'YYYY/MM/DD HH:mm',
      Crosshair: 'YYYY/MM/DD HH:mm',
      XAxis: 'YYYY/MM/DD HH:mm',
    }
) => void

配置 Crosshair、Tooltip、xAxis 日期格式化。

dateFormat 默认为YYYY/MM/DD HH:mm。
- 参数为string时，配置 Crosshair、Tooltip、xAxis 日期格式
- 参数为object时，需要符合以下格式：
  typescript
```
{
 Tooltip: 'YYYY/MM/DD HH:mm',
 Crosshair: 'YYYY/MM/DD HH:mm',
 XAxis: 'YYYY/MM/DD HH:mm',
}
```

getDateFormat(type)

typescript

(type：'Crosshair' | 'Tooltip' | 'xAxis' | undefined) => string |object

获取 Crosshair、Tooltip、xAxis 日期格式配置，参数为空时返回三者对象。

setLocale(locale)

typescript

(locale: string) => void

设置当前国际化语言环境（例：zh_CN）。

getLocale()

typescript

() => string;

获取当前国际化语言环境（例：zh_CN）。

setCustomApi(customApi)

typescript

(customApi: CustomApi) => void

typescript

// 类型声明
interface CustomApi {
  formatDate: FormatDate;
  formatBigNumber: FormatBigNumber;
  chartStore?: ChartStore;
}

设置图表的自定义 api（慎用）。

getCustomApi()

typescript

() => CustomApi;

获取图表的自定义 api。

setPriceVolumePrecision(pricePrecision, volumePrecision)

typescript

(pricePrecision: number, volumePrecision: number) => void

设置价格和数量精度，同时技术指标系列是'price'或者'volume'也会受影响。

pricePrecision 价格精度
volumePrecision 数量精度

setTimezone(timezone)

typescript

(timezone: string) => void

设置时区。

timezone 时区名，如'Asia/Shanghai'，如果不设置会自动获取本机时区，时区对应名字列表请参阅时区列表。

getTimezone()

typescript

() => string;

获取图表时区名。

setZoomEnabled(enabled)

typescript

(enabled: boolean | ZoomPosition) => void

设置是否缩放。参数enabled存在两种类型

类型为boolean时：true表示从十字光标缩放，false表示禁用缩放
类型为ZoomPosition时：
- 0：禁止缩放
- 'left'：从左侧缩放
- 'right'：从右侧缩放
- 'default'：从十字光标缩放，默认为'default'

isZoomEnabled()

typescript

() => boolean | ZoomPosition;

获取当前缩放状态。返回值存在两种类型

boolean：false表示禁用缩放
ZoomPosition：当前缩放状态（可以当true使用）
- 'left'：从左侧缩放
- 'right'：从右侧缩放
- 'default'：从十字光标缩放，默认为'default'

setScrollEnabled(enabled, isFreeMoveEnabled)

typescript

(enabled: boolean ｜ scrollActionType[], isFreeMoveEnabled: boolean) => void

设置是否可以拖拽滚动，如果设置的为scrollActionType数组，则表示允许的滚动类型。boolen 类型为true时，表示允许所有滚动类型。反之，表示不允许滚动。

scrollActionType类型包含：touch、mouse、keyboard、api
isFreeMoveEnabled 是否可以上下左右自由拖动（默认为 false，即只允许左右拖动）
关于自由拖动的问题
- 当开启isFreeMoveEnabled时，会导致 Y 轴自动计算缩放失效，拖动时图像可能超出显示范围。
- 手动缩放 Y 轴时，也会开启自由拖动，此时图像可能超出显示范围。
- 双击 Y 轴或主图区域即可恢复自动计算刻度，调整 Y 轴到合适的范围。再次双击解锁自由移动

isScrollEnabled()

typescript

() => boolean | scrollActionType[];

是否可以拖拽滚动，如果返回的为scrollActionType数组，则表示允许的滚动类型。boolen 类型为true时，表示允许所有滚动类型。反之，表示不允许滚动。

scrollActionType类型包含：touch、mouse、keyboard、api

setOffsetRightDistance(distance)

typescript

(distance: number | OffDistance) => void

OffDistance:
- distance: number
- type: 'count' | 'pixel' 设置图表右边可以空出来的间隙(传入number时单位：像素，传入OffDistance时单位可以指定为'count'或'pixel')。

getOffsetRightDistance()

typescript

() => number;

获取图表右边可以空出来的间隙。

setRightBeyondBarCount(barCount | OffDistance)

typescript

(barCount: number | OffDistance) => void

OffDistance:
- distance: number
- type: 'count' | 'pixel' 设置右边留白的柱子数量空间。

setLeftBeyondBarCount(barCount | OffDistance)

typescript

(barCount: number | OffDistance) => void

OffDistance:
- distance: number
- type: 'count' | 'pixel' 设置左边留白的柱子数量空间。

setBarSpace(space)

typescript

(space: number) => void

设置图表单根蜡烛柱的宽度。

此方法受barSpaceLimit限制，当图表宽度小于barSpaceLimit.min时，图表单根蜡烛柱的宽度将为barSpaceLimit.min；当图表宽度大于barSpaceLimit.max时，图表单根蜡烛柱的宽度将为barSpaceLimit.max。

getBarSpace()

typescript

() => number;

获取图表单根蜡烛柱的宽度。

setBarSpaceLimit({max, min})

typescript

({max: number, min: number}) => void

设置图表单根蜡烛柱的宽度范围。

TIP

0≤min≤max，当等于 0 时，可无限缩小。
此方法会同时影响图表单根蜡烛柱的宽度！当图表宽度小于min时，图表单根蜡烛柱的宽度将为min；当图表宽度大于max时，图表单根蜡烛柱的宽度将为max。

getBarSpaceLimit()

typescript

() => {max: number, min: number};

获取图表单根蜡烛柱的宽度范围。

getVisibleWidth()

typescript

() => number;

获取图表可视区域宽度。

getVisibleRange()

typescript

() => {
  from: number;
  to: number;
  realFrom: number;
  realTo: number;
};

获取可见区间范围。

applyNewData(dataList, more, callback)

typescript

(
  dataList：Array<{
    timestamp: number
    open: number
    close: number
    high: number
    low: number
    volume?: number,
    turnover?: number
  }>,
  more?: boolean,
  callback?: () => void
) => void

添加新数据，此方法会清空图表数据，不需要额外调用 clearData 方法。

dataList 是一个 K 线数据数组，数据类型详情可参阅chart 数据结构
more 告诉图表还有没有更多历史数据，可缺省，默认为 true
callback 成功回调

applyMoreData(dataList, direction, more, callback)

typescript

(
  dataList：Array<{
    timestamp: number
    open: number
    close: number
    high: number
    low: number
    volume?: number
    turnover?: number
  }>,
  direction?: 'forward' | 'backward',
  more?: boolean,
  callback?: () => void
) => void

添加历史更多数据。

dataList 是一个 K 线数据数组，数据类型详情可参阅chart 数据结构
direction 指定数据添加方向：'forward' | 'backward'，可缺省，默认为 'forward
more 告诉图表还有没有更多历史数据，可缺省，默认为 true
callback 成功回调

updateData(data, callback)

typescript

(
  data: {
    timestamp: number
    open: number
    close: number
    high: number
    low: number
    volume?: number
    turnover?: number
  },
  callback?: () => void
) => void

更新数据，目前只会匹配当前最后一条数据的时间戳，相同则覆盖，不同则追加。

data 单条 k 线数据，数据类型详情可参阅chart 数据结构
callback 成功回调

getDataList()

typescript

() =>
  Array<{
    timestamp: number;
    open: number;
    close: number;
    high: number;
    low: number;
    volume?: number;
    turnover?: number;
  }>;

获取图表目前的数据源，返回数据类型可参阅chart 数据结构。

getRealDataList()

typescript

() =>
  Array<{
    timestamp: number;
    open: number;
    close: number;
    high: number;
    low: number;
    volume?: number;
    turnover?: number;
  }>;

用于获取非 NaN 的数据列表（分时场景会提前绘制未来时间轴，这部分数据无收盘价，需要过滤掉）

WARNING

指标绘制时取用的 dataList 就是通过此 API 获取。

getVisibleDataList()

typescript

() =>
  Array<{
    dataIndex: number;
    x: number;
    data: {
      timestamp: number;
      open: number;
      close: number;
      high: number;
      low: number;
      volume?: number;
      turnover?: number;
    };
  }>;

获取图表可视区域中的数据，返回数据类型中的 data 可参阅chart 数据结构。

getVisibleDrawLineDataList()

typescript

() =>
  Promise<
    {
      page: string;
      lineType: number;
      lineData: string;
    }[]
  >;

page 主图副图标识（主图分时：109C8，k 线：C09C8）
lineType 线型 ID
lineData 线型 xml 数据

获取图表可视区域中的画线数据，返回编译后的 xml 数据。

异步处理函数，返回 Promise 对象。

clearData()

typescript

() => void

清空图表数据，一般情况下不用手动调用，为了避免重复绘制，这里只是清除数据，图表不会重绘。

loadMore(cb)

typescript

(cb: ({
  diection: 'forward' | 'backward',
  timestamp: number | null
}) => void) => void

设置加载更多回调函数。

cb 是一个回调方法，timestamp为第一条数据的时间戳，direction为加载方向，'forward' | 'backward'

createIndicator(value, isStack, paneOptions, callback)

typescript

(
  value:
    | string
    | {
        name: string;
        shortName?: string;
        precision?: number;
        calcParams?: any[];
        shouldOhlc?: boolean;
        shouldFormatBigNumber?: boolean;
        visible?: boolean;
        extendData?: any;
        series?: 'normal' | 'price' | 'volume';
        figures?: Array<{
          key: string;
          title?: string;
          type?: string;
          baseValue?: number;
          styles?: (
            data: object,
            indicator: object,
            defaultStyles: object
          ) => {
            style?: 'solid' | 'dashed' | 'stroke' | 'fill' | 'stroke_fill';
            color?: string;
          };
        }>;
        minValue?: number;
        maxValue?: number;
        styles?: object;
        calc?: (dataList: KLineData[], indicator: object) => Promise<object[]> | object[];
        regenerateFigures?: (calcParms: any[]) => Array<{
          key: string;
          title?: string;
          type?: string;
          baseValue?: number;
          styles?: (
            data: object,
            indicator: object,
            defaultStyles: object
          ) => {
            style?: 'solid' | 'dashed' | 'stroke' | 'fill' | 'stroke_fill';
            color?: string;
          };
        }>;
        createTooltipDataSource?: (params: object) => {
          name?: string;
          calcParamsText?: string;
          values?: Array<{
            title:
              | string
              | {
                  text: string;
                  color: string;
                };
            value:
              | string
              | {
                  text: string;
                  color: string;
                };
          }>;
        };
        draw?: (params: object) => boolean;
      },
  isStack?: boolean,
  paneOptions?:
    | boolean
    | {
        paneId?: string;
        height?: number;
        minHeight?: number;
        dragEnabled?: boolean;
        gap?: {
          top?: number;
          bottom?: number;
        };
        axisOptions?: {
          scrollZoomEnabled?: boolean;
        };
      }
    | null,
  callback?: () => void
) => string | null;

创建一个技术指标，返回值是一个标识窗口的字符串，这非常重要，后续对该窗口的一些操作，都需要此标识。

value 技术指标名或者技术指标对象，当是对象时，类型和图表方法overrideIndicator的入参一致
isStack 主图是否可以叠加其他指标，可缺省，默认为 true，若为 false，则会顶替掉其他指标独占主图
paneOptions 窗口配置信息，可缺省,当为 boolean 类型时，表示是否叠加到主图上
- paneId 窗口 id，可缺省
- height 窗口高度，可缺省
- minHeight �� 口最小高度，可缺省
- dragEnabled 窗口是否可以拖拽调整高度，可缺省
- gap 边距
  - top 上边距，值小余 1 则是百分比
  - bottom 下边距，值小余 1 则是百分比
- axisOptions
  - scrollZoomEnabled 轴上是否可以滚动缩放
callback 指标创建完成回调方法
特殊的 id
'candle_pane'，主图的窗口 id。

示例：

javascript

chart.createIndicator(
  'MA',
  false,
  {
    paneId: 'pane_1',
    height: 100,
    minHeight: 30,
    dragEnabled: true,
    gap: { top: 0.2, bottom: 0.1 },
    axisOptions: { scrollZoomEnabled: true },
  },
  () => {}
);

overrideIndicator(override, paneId, callback)

typescript

(
  override: {
    name: string
    shortName?: string
    precision?: number
    calcParams?: any[]
    shouldOhlc?: boolean
    shouldFormatBigNumber?: boolean
    visible?: boolean
    extendData?: any
    series?: 'normal' | 'price' | 'volume'
    figures?: Array<{
      key: string
      title?: string
      type?: string
      baseValue?: number
      styles?: (
        data: object,
        indicator: object,
        defaultStyles: object
      ) => {
        style?: 'solid' | 'dashed' | 'stroke' | 'fill' | 'stroke_fill'
        color?: string
      }
    }>
    minValue?: number
    maxValue?: number
    styles?: object
    calc?: (dataList: KLineData[], indicator: object) => Promise<object[]> | object[]
    regenerateFigures?: (calcParms: any[]) => Array<{
      key: string
      title?: string
      type?: string
      baseValue?: number
      styles?: (
        data: object,
        indicator: object,
        defaultStyles: object
      ) => {
        style?: 'solid' | 'dashed' | 'stroke' | 'fill' | 'stroke_fill'
        color?: string
      }
    }>,
    createTooltipDataSource?: (params: object) => {
      name?: string
      calcParamsText?: string
      values?: Array<{
        title: string | {
          text: string
          color: string
        }
        value: string | {
          text: string
          color: string
        }
      }>
    }
    draw?: (params: object) => boolean
  },
  paneId?: string | null,
  callback?: () => void
) => void

覆盖技术指标信息。

override 需要覆盖的一些参数
- name 指标名，用于创建和操作的唯一标识
- shortName 简短名字，用于显示
- precision 精度
- calcParams 计算参数
- shouldOhlc 是否需要 ohlc 辅助图形
- shouldFormatBigNumber 是否需要格式化大的数字。如 1000 转换成 1k，1000000 转换为 1M 等
- visible 是否可见
- extendData 扩展数据
- series 指标系列，可选项有'normal'，'price'和'volume'
- figures 图形配置
- minValue 指定最小值
- maxValue 指定最大值
- styles 样式
- calc 计算方法
- regenerateFigures 重新生成图形信息方法
- createTooltipDataSource 创建自定义提示信息方法
- draw 自定义绘制方法
paneId 窗口 id，缺省则设置所有
callback 成功回调
特殊的 id
'candle_pane'，主图的窗口 id。

示例：

javascript

chart.overrideIndicator({
  name: 'BOLL',
  showName: 'BOLL'
  calcParams: [20, 5.5],
  precision: 4,
  shouldOhlc: true,
  shouldFormatBigNumber: false,
  visible: true,
  extendData: 2432435,
  series: 'price',
  figures: [],
  minValue: null,
  maxValue: null,
  calc: () => [],
  regenerateFigures: () => [],
  draw: () => {},
  styles: {
  	bars:[{
      style: 'fill,
      borderStyle: 'solid,
      borderSize: 1,
      borderDashedValue: [2, 2],
      upColor: '#26A69A',
      downColor: '#EF5350',
      noChangeColor: '#888888'
    }],
    lines: [{
      size: 1,
      style: 'solid',
      dashedValue: [2, 2],
      color: '#FF9600'
    }],
    circles: [{
      style: 'fill,
      borderStyle: 'solid,
      borderSize: 1,
      borderDashedValue: [2, 2],
      upColor: '#26A69A',
      downColor: '#EF5350',
      noChangeColor: '#888888'
    }]
  }
}, 'candle_pane', () => {})

getIndicatorByPaneId(paneId, name)

typescript

(paneId?: string, name?: string) => object;

根据窗口 id 获取技术指标信息。

paneId 窗口 id，即调用createIndicator方法时返回的窗口标识，可缺省，缺省则返回所有。
name 技术指标名
特殊的 id
'candle_pane'，主图的窗口 id。

removeIndicator(paneId, name)

typescript

(paneId: string, name?: string) => object;

移除技术指标。

paneId 窗口 id，即调用createIndicator方法时返回的窗口标识
name 技术指标名，如果缺省，则会移除所有
特殊的 id
'candle_pane'，主图的窗口 id。

createOverlay(value, paneId)

typescript

(
  value:
    | string
    | number
    | {
        name: string;
        id?: string;
        groupId?: string;
        lock?: boolean;
        visible?: boolean;
        zLevel?: number;
        needDefaultPointFigure?: boolean;
        needDefaultXAxisFigure?: boolean;
        needDefaultYAxisFigure?: boolean;
        mode?: 'normal' | 'weak_magnet' | 'strong_magnet';
        modeSensitivity?: number;
        points?: Array<{
          timestamp?: number;
          dataIndex?: number;
          value?: number;
        }>;
        extendData?: any;
        styles?: object;
        lineType?: string;
        lineData?: string;
        needToolbar?: boolean;
        onDrawStart?: (event: object) => boolean;
        onDrawing?: (event: object) => boolean;
        onDrawEnd?: (event: object) => boolean;
        onClick?: (event: object) => boolean;
        onDoubleClick?: (event: object) => boolean;
        onRightClick?: (event: object) => boolean;
        onPressedMoveStart?: (event: object) => boolean;
        onPressedMoving?: (event: object) => boolean;
        onPressedMoveEnd?: (event: object) => boolean;
        onMouseEnter?: (event: object) => boolean;
        onMouseLeave?: (event: object) => boolean;
        onRemoved?: (event: object) => boolean;
        onSelected?: (event: object) => boolean;
        onDeselected?: (event: object) => boolean;
      }
    | Array<
        | string
        | {
            name: string;
            id?: string;
            groupId?: string;
            lock?: boolean;
            visible?: boolean;
            zLevel?: number;
            needDefaultPointFigure?: boolean;
            needDefaultXAxisFigure?: boolean;
            needDefaultYAxisFigure?: boolean;
            mode?: 'normal' | 'weak_magnet' | 'strong_magnet';
            modeSensitivity?: number;
            points?: Array<{
              timestamp?: number;
              dataIndex?: number;
              value?: number;
            }>;
            extendData?: any;
            styles?: object;
            lineType?: string;
            lineData?: string;
            needToolbar?: boolean;
            onDrawStart?: (event: object) => boolean;
            onDrawing?: (event: object) => boolean;
            onDrawEnd?: (event: object) => boolean;
            onClick?: (event: object) => boolean;
            onDoubleClick?: (event: object) => boolean;
            onRightClick?: (event: object) => boolean;
            onPressedMoveStart?: (event: object) => boolean;
            onPressedMoving?: (event: object) => boolean;
            onPressedMoveEnd?: (event: object) => boolean;
            onMouseEnter?: (event: object) => boolean;
            onMouseLeave?: (event: object) => boolean;
            onRemoved?: (event: object) => boolean;
            onSelected?: (event: object) => boolean;
            onDeselected?: (event: object) => boolean;
          }
      >,
  paneId?: string
) => string | null;

创建覆盖物，返回一个字符串类型的标识。

value 为 string 类型时，代表覆盖物名称 name；为 number 类型时，代表画线覆盖物 lineType；为对象时，参数和overrideOverlay一致
paneId 窗口 id，可缺省
特殊的 id
'candle_pane'，主图的窗口 id。

示例：

javascript

chart.createOverlay({
  name: 'segment',
  id: 'segment_1'
  groupId: 'segment',
  points: [
    { timestamp: 1614171282000, value: 18987 },
    { timestamp: 1614171202000, value: 16098 },
  ],
  styles: {
    line: {
      style: 'solid',
      dashedValue: [2, 2]
      color: '#f00',
      size: 2
    }
  },
  lock: false,
  visible: true,
  zLevel: 0,
  mode: 'weak_magnet',
  modeSensitivity: 8,
  extendData: 'xxxxxxxx',
  needDefaultPointFigure: false,
  needDefaultXAxisFigure: false,
  needDefaultYAxisFigure: false,
  onDrawStart: function (event) { console.log(event) },
  onDrawing: function (event) { console.log(event) },
  onDrawEnd: function (event) { console.log(event) },
  onClick: function (event) { console.log(event) },
  onDoubleClick: function (event) { console.log(event) },
  onRightClick: function (event) {
    console.log(event)
    return false
  },
  onMouseEnter: function (event) { console.log(event) },
  onMouseLeave: function (event) { console.log(event) },
  onPressedMoveStart: function (event) { console.log(event) },
  onPressedMoving: function (event) { console.log(event) },
  onPressedMoveEnd: function (event) { console.log(event) },
  onRemoved: function (event) { console.log(event) },
  onSelected: function (event) { console.log(event) },
  onDeselected: function (event) { console.log(event) }
})

getOverlayById(id)

typescript

(id: string) => object;

根据 id 获取覆盖物信息。

id 调用createOverlay方法是返回的标识

overrideOverlay(override)

typescript

(override: {
  name: string;
  id?: string;
  groupId?: string;
  lock?: boolean;
  visible?: boolean;
  zLevel?: number;
  needDefaultPointFigure?: boolean;
  needDefaultXAxisFigure?: boolean;
  needDefaultYAxisFigure?: boolean;
  mode?: 'normal' | 'weak_magnet' | 'strong_magnet';
  modeSensitivity?: number;
  points?: Array<{
    timestamp?: number;
    dataIndex?: number;
    value?: number;
  }>;
  extendData?: any;
  styles?: object;
  lineType?: string;
  lineData?: string;
  needToolbar?: boolean;
  onDrawStart?: (event: object) => boolean;
  onDrawing?: (event: object) => boolean;
  onDrawEnd?: (event: object) => boolean;
  onClick?: (event: object) => boolean;
  onDoubleClick?: (event: object) => boolean;
  onRightClick?: (event: object) => boolean;
  onPressedMoveStart?: (event: object) => boolean;
  onPressedMoving?: (event: object) => boolean;
  onPressedMoveEnd?: (event: object) => boolean;
  onMouseEnter?: (event: object) => boolean;
  onMouseLeave?: (event: object) => boolean;
  onRemoved?: (event: object) => boolean;
  onSelected?: (event: object) => boolean;
  onDeselected?: (event: object) => boolean;
}) => string | null;

覆盖已绘制的覆盖物。

override 需要覆盖的参数
- name 覆盖物名，用于创建的唯一标识
- id 覆盖物标识，如果 id 存在，则会以 id 为依据去覆盖
- groupId 编组 id
- lock 是否锁定不让拖动
- visible 是否可见
- zLevel 绘制层级，值越大越靠前显示
- needDefaultPointFigure 是否需要默认的点对应的图形
- needDefaultXAxisFigure 是否需要默认的 x 轴上的图形
- needDefaultYAxisFigure 是否需要默认的 y 轴上的图形
- mode 模式，可选项有'normal'，'weak_magnet'和'strong_magnet'
- modeSensitivity 模式灵敏度，仅 mode 是 weak_magnet 时有效
- points 点信息
- extendData 扩展数据
- styles 样式
- lineType 【画线专属】线型 ID;
- lineData 【画线专属】画线数据 xml 字符串;
- needToolbar 【画线专属】是否需要工具栏;
- onDrawStart 开始绘制事件
- onDrawing 绘制中事件
- onDrawEnd 绘制结束事件
- onClick 点击事件
- onDoubleClick 双击事件
- onRightClick 右击事件
- onPressedMoveStart 按住开始移动事件
- onPressedMoving 按住移动中事件
- onPressedMoveEnd 按住移动结束事件
- onMouseEnter 鼠标移入事件
- onMouseLeave 鼠标移出事件
- onRemoved 删除事件
- onSelected 选中事件
- onDeselected 取消选中事件

示例：

javascript

chart.overrideOverlay({
  name: 'segment',
  id: 'segment_1',
  groupId: 'segment',
  points: [
    { timestamp: 1614171282000, value: 18987 },
    { timestamp: 1614171202000, value: 16098 },
  ],
  styles: {
    line: {
      style: 'solid',
      dashedValue: [2, 2]
      color: '#f00',
      size: 2
    }
  },
  lock: false,
  visible: true,
  zLevel: 0,
  mode: 'weak_magnet',
  modeSensitivity: 8,
  extendData: 'xxxxxxxx',
  needDefaultPointFigure: false,
  needDefaultXAxisFigure: false,
  needDefaultYAxisFigure: false,
  onDrawStart: function (event) { console.log(event) },
  onDrawing: function (event) { console.log(event) },
  onDrawEnd: function (event) { console.log(event) },
  onClick: function (event) { console.log(event) },
  onDoubleClick: function (event) { console.log(event) },
  onRightClick: function (event) {
    console.log(event)
    return false
  },
  onMouseEnter: function (event) { console.log(event) },
  onMouseLeave: function (event) { console.log(event) },
  onPressedMoveStart: function (event) { console.log(event) },
  onPressedMoving: function (event) { console.log(event) },
  onPressedMoveEnd: function (event) { console.log(event) },
  onRemoved: function (event) { console.log(event) },
  onSelected: function (event) { console.log(event) },
  onDeselected: function (event) { console.log(event) }
})

removeOverlay(remove)

typescript

(
  remove: string | {
    id?: string
    groupId?: string
    name?: string
  }
) => void

移除图形。

id 调用createOverlay方法是返回的标识
groupId 编组 id
name 覆盖物名称

删除一个 html 元素

paneId 窗口 id，缺省则删除所有
htmlId 创建时候的 id，可以是单个 id，也可以是 id 组成的数组，缺省则删除对应窗口上所有的

measure(measuring, measureEnd, removeAfterDrawEnd)

typescript

(
  measuring?: (res: MeasureResult) => void,
  measureEnd?: (res: MeasureResult) => void,
  removeAfterDrawEnd: boolean = true
) => Nullable<string>;

// 测量结果数据格式：
interface MeasureResult {
  // 测量起始时间（毫秒时间戳）
  startTime: number;
  // 测量结束时间（毫秒时间戳）
  endTime: number;
  // 测量起始点位价格
  startPrice: number;
  // 测量结束点位价格
  endPrice: number;
  // 测量区间k线数量
  count: number;
  // 测量区间总成交量
  volume: number;
  // 价差
  spread: number;
  // 涨跌幅（百分比%）
  changeRate: string;
}

此方法用于测量区域内行情数据，并返回测量数据

measuring 测量中回调函数，实时返回测量结果MeasureResult；
measureEnd 测量结束回调函数，返回最终测量结果MeasureResult；
removeAfterDrawEnd 是否需要在测量绘图结束后自动删除测量图形（默认：true），为 false 时 api 返回测量图形实例 id，否则返回 null。

示例：

typescript

// 持续测量，并保留测量图形
chart.measure(
  res => {
    console.log('测量中：', res);
  },
  res => {
    console.log('测量结束：', res);
  },
  false
);

注意：测量工具本身是一个通用覆盖物，可以通过chart.createOverlay()自己创建测量图形，并自定义测量事件，例如：

typescript

chart.createOverlay({
  name: 'measure',
  // 绘制中
  onDrawing: ({ overlay }) => {
    measureingHandler(overlay);
    return true;
  },
  // 绘制结束
  onDrawEnd: ({ overlay }) => {
    measureEndHandler(overlay);
    // 绘图结束删除画线
    removeAfterDrawEnd && measureId && chart.removeOverlay(measureId as string);
    return true;
  },
  // 拖动中（仅适用于：removeAfterDrawEnd=false）
  onPressedMoving: ({ overlay }) => {
    measureingHandler(overlay);
    return false;
  },
  // 拖动结束（仅适用于：removeAfterDrawEnd=false）
  onPressedMoveEnd: ({ overlay }) => {
    measureEndHandler(overlay);
    return true;
  },
  // 右键取消测量
  onRightClick: ({ overlay }: any) => {
    measureEndHandler(overlay);
    measureId && chart.removeOverlay(measureId as string);
    return false;
  },
});

scrollByDistance(distance, animationDuration)

typescript

(distance: number, animationDuration?: number) => void

滚动一定的距离。

distance 距离
animationDuration 动画时间，可以缺省，缺省则无动画

scrollToRealTime(animationDuration)

typescript

(distance: number, animationDuration?: number) => void

滚动到最初的位置。

animationDuration 动画时间，可以缺省，缺省则无动画

scrollToDataIndex(dataIndex, animationDuration)

typescript

(dataIndex: number, animationDuration?: number) => void

滚动到指定的位置。

dataIndex 数据的索引
animationDuration 动画时间，可以缺省，缺省则无动画

scrollToTimestamp(timestamp, animationDuration)

typescript

(timestamp: number, animationDuration?: number) => void

滚动到指定时间戳。

timestamp 时间戳
animationDuration 动画时间，可以缺省，缺省则无动画

zoomAtCoordinate(scale, coordinate, animationDuration)

typescript

(
  scale: number,
  coordinate?: {
    x: number
    y: number
  },
  animationDuration?: number
) => void

在某个坐标点缩放。

scale 缩放比例，1 表示不缩放，2 表示放大一倍，0.5 表示缩小一倍（受barSpaceLimit限制）
coordinate 坐标点，可缺省，缺省则在图表中间位置缩放
animationDuration 动画时间，可以缺省，缺省则无动画

zoomAtDataIndex(scale, dataIndex, animationDuration)

typescript

(scale: number, dataIndex: number, animationDuration?: number) => void

在某个位置缩放。

scale 缩放比例，1 表示不缩放，2 表示放大一倍，0.5 表示缩小一倍（受barSpaceLimit限制）
dataIndex 数据的索引
animationDuration 动画时间，可以缺省，缺省则无动画

zoomAtTimestamp(scale, timestamp, animationDuration)

typescript

(scale: number, timestamp: number, animationDuration?: number) => void

在指定时间戳上缩放。

scale 缩放比例，1 表示不缩放，2 表示放大一倍，0.5 表示缩小一倍（受barSpaceLimit限制）
timestamp 时间戳
animationDuration 动画时间，可以缺省，缺省则无动画

zoomToShowAllData()

typescript

() => void

将视图缩放至能展示所有 k 线数据（数据过少会放大，数据超出会缩小，受barSpaceLimit限制）

setPaneOptions(options, forceRefresh)

typescript

(
  options: {
    paneId: string
    height?: number
    minHeight?: number
    dragEnabled?: boolean
    gap?: {
      top?: number
      bottom?: number
    },
    yAxisRange?: {
      min?: number
      max?: number
    },
    axisOptions?: {
      scrollZoomEnabled?: boolean
    }
    styles: DeepPartial<Styles>
  },
  forceRefresh?: boolean
) => void

设置窗口配置。

特殊的 id

candle_pane，主图的窗口 id。
设置yAxisRange时，max和min必需同时设置

paneOptions 窗口配置信息，可缺省
- paneId 窗口 id
- height 窗口高度，可缺省
- minHeight 窗口最小高度，可缺省
- dragEnabled 窗口是否可以拖拽调整高度，可缺省
- gap 边距
  - top 上边距，值＜ 1 则是百分比，≥ 1 时，gap 的实际空间yAxisMax + top/height*range，range 指的是可视区域内数据极值的差值
  - bottom 下边距，值＜ 1 则是百分比，≥ 1 时，gap 的实际空间yAxisMin - bottom/height*range，range 指的是可视区域内数据极值的差值
- axisOptions - scrollZoomEnabled 轴上是否可以滚动缩放
- yAxisRange 设置 Y 轴范围，可缺省
  - min 最小值
  - max 最大值
- styles 面板定制 styles 样式配置
forceRefresh 是否强制刷新图表，可缺省，默认为 false （当修改 option 后图像未刷线可使用 true 强制刷新）

示例：

javascript

chart.setPaneOptions({
  paneId: 'pane_1',
  height: 100,
  minHeight: 3,
  dragEnabled: true,
  gap: { top: 0.2, bottom: 0.1 },
  axisOptions: { scrollZoomEnabled: true },
  styles: {},
});

executeAction(type, data)

typescript

(
   type: 'onCrosshairChange',
   data?: {
      x?: number
      y?: number
      paneId?: string
   }
) => void

执行图表动作

type 仅支持 'onCrosshairChange'，设置 data 为{}/undefined/null时，表示 crosshair 隐藏
注意：本方法同样会触发subscribeAction订阅的回调方法，如果 xy 坐标超出图表范围，回调中的 data 中 x，y 坐标为仍旧为超出范围的值
data 执行动作需要的数据，其中
- x x 坐标
- y y 坐标
- paneId 窗口 id

subscribeAction(type, callback)

typescript

(
  type: 'onZoom' | 'onScroll' | 'onVisibleRangeChange' | 'onCrosshairChange' | 'onCandleBarClick' | 'onTooltipIconClick' | 'onPaneDrag',
  callback: (data?: any) => void
) => void

订阅图表动作。

type 可选项为'onZoom'，'onScroll'，'onVisibleRangeChange'，'onCandleBarClick', 'onTooltipIconClick'，'onCrosshairChange'和'onPaneDrag'
注意：'onCrosshairChange' 返回 data 中没有 x，y 坐标点时，表示 crosshair 隐藏
callback 是一个回调方法

unsubscribeAction(type, callback)

typescript

(
  type: 'onZoom' | 'onScroll' | 'onVisibleRangeChange' | 'onCrosshairChange' | 'onCandleBarClick' | 'onTooltipIconClick' | 'onPaneDrag',
  callback?: (data?: any) => void
) => void

取消订阅图表动作。

type 可选项为'onZoom'，'onScroll'，'onVisibleRangeChange'，'onCandleBarClick', 'onTooltipIconClick'，'onCrosshairChange'和'onPaneDrag'
callback 订阅时的回调方法，缺省则取消当前类型所有

convertToPixel(value, finder)

typescript

(
  value: {
    dataIndex?: number
    timestamp?: number
    value?: number
  } | Array<{
    dataIndex?: number
    timestamp?: number
    value?: number
  }>,
  finder: {
    paneId?: string
    absolute?: boolean
  }
) => { x: number?, y?: number } | Array<{ x?: number, y?: number }>

将值转换成坐标。

value 需要转换的值，可以是当个对象，也可以是数组
- dataIndex 数据索引，如果dataIndex和timestamp同时存在，则依据索引转换
- timestamp 时间戳
- value 对应 y 轴的值
finder 过滤条件
- paneId 窗口 id
- absolute 是否是绝对坐标，只作用于 y 轴

convertFromPixel(coordinate, finder)

typescript

(
  coordinate: {
    x?: number
    y?: number
  } | Array<{
    x?: number
    y?: number
  },
  finder: {
    paneId?: string
    absolute?: boolean
  }
) => {
    dataIndex?: number
    timestamp?: number
    value?: number
  } | Array<{
    dataIndex?: number
    timestamp?: number
    value?: number
  }>

将坐标转换成值。

coordinate 需要转换的值，可以是当个对象，也可以是数组
finder 过滤条件
- paneId 窗口 id
- absolute 是否是绝对坐标，只作用于 y 轴

getConvertPictureUrl(includeOverlay, type, backgroundColor)

typescript

(includeOverlay?: boolean, type?: string, backgroundColor?: string) => string;

获取图表转换成图片后的图片 url。

includeOverlay 是否需要包含浮层，可缺省
type 转换后的图片类型，类型是'png'、'jpeg'、'bmp'三种中的一种，可缺省，默认为'jpeg'
backgroundColor 背景色，可缺省，默认为'#FFFFFF'

resize(reset)

typescript

(reset?: boolean) => void

调整图表大小，总是会填充容器大小。

reset 是否重置坐标轴范围并滚动到最右端，可缺省，默认为 false

注意

此方法会重新计算整个图表各个模块的大小，频繁调用可能会影响到性能，调用请谨慎。

setHorizontalScreen(boolean)

typescript

(boolean) => void

当页面通过 css 旋转实现横屏模式时，可通过次 API 矫正 X、Y 轴。

isHorizontalScreen()

typescript

() => boolean;

获取当前是否是横屏模式。

实例 API ​

getDom(paneId, position) ​

getPaneById(paneId) ​

getYAxisRangeInfo(paneId) ​

getSize(paneId, position) ​

setPanelHeight(paneId, Height) ​

setStyles(styles) ​

getStyles() ​

setPrePrice(prePrice):void ​

getPrePrice() ​

setDateFormat(dateFormat) ​

getDateFormat(type) ​

setLocale(locale) ​

getLocale() ​

setCustomApi(customApi) ​

getCustomApi() ​

setPriceVolumePrecision(pricePrecision, volumePrecision) ​

setTimezone(timezone) ​

getTimezone() ​

setZoomEnabled(enabled) ​

isZoomEnabled() ​

setScrollEnabled(enabled, isFreeMoveEnabled) ​

isScrollEnabled() ​

setOffsetRightDistance(distance) ​

getOffsetRightDistance() ​

setRightBeyondBarCount(barCount | OffDistance) ​

setLeftBeyondBarCount(barCount | OffDistance) ​

setBarSpace(space) ​

getBarSpace() ​

setBarSpaceLimit({max, min}) ​

getBarSpaceLimit() ​

getVisibleWidth() ​

getVisibleRange() ​

applyNewData(dataList, more, callback) ​

applyMoreData(dataList, direction, more, callback) ​

updateData(data, callback) ​

getDataList() ​

getRealDataList() ​

getVisibleDataList() ​

getVisibleDrawLineDataList() ​

clearData() ​

loadMore(cb) ​

createIndicator(value, isStack, paneOptions, callback) ​

overrideIndicator(override, paneId, callback) ​

getIndicatorByPaneId(paneId, name) ​

removeIndicator(paneId, name) ​

createOverlay(value, paneId) ​

getOverlayById(id) ​

overrideOverlay(override) ​

removeOverlay(remove) ​

measure(measuring, measureEnd, removeAfterDrawEnd) ​

scrollByDistance(distance, animationDuration) ​

scrollToRealTime(animationDuration) ​

scrollToDataIndex(dataIndex, animationDuration) ​

scrollToTimestamp(timestamp, animationDuration) ​

zoomAtCoordinate(scale, coordinate, animationDuration) ​

zoomAtDataIndex(scale, dataIndex, animationDuration) ​

zoomAtTimestamp(scale, timestamp, animationDuration) ​

zoomToShowAllData() ​

setPaneOptions(options, forceRefresh) ​

executeAction(type, data) ​

subscribeAction(type, callback) ​

unsubscribeAction(type, callback) ​

convertToPixel(value, finder) ​

convertFromPixel(coordinate, finder) ​

getConvertPictureUrl(includeOverlay, type, backgroundColor) ​

resize(reset) ​

setHorizontalScreen(boolean) ​

isHorizontalScreen() ​

实例 API

getDom(paneId, position)

getPaneById(paneId)

getYAxisRangeInfo(paneId)

getSize(paneId, position)

setPanelHeight(paneId, Height)

setStyles(styles)

getStyles()

setPrePrice(prePrice):void

getPrePrice()

setDateFormat(dateFormat)

getDateFormat(type)

setLocale(locale)

getLocale()

setCustomApi(customApi)

getCustomApi()

setPriceVolumePrecision(pricePrecision, volumePrecision)

setTimezone(timezone)

getTimezone()

setZoomEnabled(enabled)

isZoomEnabled()

setScrollEnabled(enabled, isFreeMoveEnabled)

isScrollEnabled()

setOffsetRightDistance(distance)

getOffsetRightDistance()

setRightBeyondBarCount(barCount | OffDistance)

setLeftBeyondBarCount(barCount | OffDistance)

setBarSpace(space)

getBarSpace()

setBarSpaceLimit({max, min})

getBarSpaceLimit()

getVisibleWidth()

getVisibleRange()

applyNewData(dataList, more, callback)

applyMoreData(dataList, direction, more, callback)

updateData(data, callback)

getDataList()

getRealDataList()

getVisibleDataList()

getVisibleDrawLineDataList()

clearData()

loadMore(cb)

createIndicator(value, isStack, paneOptions, callback)

overrideIndicator(override, paneId, callback)

getIndicatorByPaneId(paneId, name)

removeIndicator(paneId, name)

createOverlay(value, paneId)

getOverlayById(id)

overrideOverlay(override)

removeOverlay(remove)

measure(measuring, measureEnd, removeAfterDrawEnd)

scrollByDistance(distance, animationDuration)

scrollToRealTime(animationDuration)

scrollToDataIndex(dataIndex, animationDuration)

scrollToTimestamp(timestamp, animationDuration)

zoomAtCoordinate(scale, coordinate, animationDuration)

zoomAtDataIndex(scale, dataIndex, animationDuration)

zoomAtTimestamp(scale, timestamp, animationDuration)

zoomToShowAllData()

setPaneOptions(options, forceRefresh)

executeAction(type, data)

subscribeAction(type, callback)

unsubscribeAction(type, callback)

convertToPixel(value, finder)

convertFromPixel(coordinate, finder)

getConvertPictureUrl(includeOverlay, type, backgroundColor)

resize(reset)

setHorizontalScreen(boolean)

isHorizontalScreen()