Skip to content

init(ds, options?)

init 用于初始化一个图表。

提示

调用时,需要等待容器 dom 准备完成之后。

参考

typescript
(
  ds: string | HTMLElement,
  options?: {
    layout?: Array<{
      type: 'candle' | 'indicator' | 'xAxis'
      content?: Array<Indicator | string>
      options?: {
        id?: string
        height?: number
        minHeight?: number
        dragEnabled?: boolean
        order?: number
        state?: 'normal' | 'maximize' | 'minimize'
        axis?: {
          name?: string
          reverse?: boolean
          inside?: boolean
          position?: 'left' | 'right'
          scrollZoomEnabled?: boolean
          gap?: {
            top?: number
            bottom?: number
          }
        }
      }
    }>
    locale?: string
    styles?: string | Styles
    timezone?: string
    customApi?: {
      formatDate?: (timestamp: number, format: string, type: number) => string
      formatBigNumber?: (value: string | number) => string
    }
    thousandsSeparator?: {
      sign?: string
      format: (value: number | string) => string
    }
    decimalFold?: {
      threshold?: number
      format?: (value: number | string) => string
    }
  }
) => Chart

参数

  • ds 容器,可以是dom元素或者元素id。
  • options 可选配置项。
    • layout 自定义布局,是一个数组。
      • type 窗口类型,支持 candleindicatorxAxis
      • content 窗口内容,仅仅支持指标。
      • options 窗口配置。
        • id 窗口id。
        • height 高度。
        • minHeight 最小高度。
        • dragEnabled 是否可以拖拽调整高度。
        • order 顺序。
        • state 状态,支持 normalmaximizeminimize
        • axis 坐标轴配置。
          • name 坐标轴名称。
          • reverse 是否反向。
          • inside 是否在内部。
          • position 位置,支持 leftright
          • scrollZoomEnabled 是否允许滚动缩放。
          • gap 上下边距配置。
            • top 上边距。
            • bottom 下边距。
    • locale 语言,内置支持 zh-CNen-US
    • timezone 时区名,如 Asia/Shanghai ,如果不设置会自动获取本机时区,时区对应名字列表请参阅 时区列表
    • styles 可以是通过 klinecharts.registerStyles 注册的样式名,也可以是 StylesStyles 详情参阅 样式 ,支持增量。
    • customApi 自定义一些api。
      • formatDate 格式化日期。
      • formatBigNumber 格式化大的数字,如1000转换成1k,1000000转换为1M等。
    • thousandsSeparator 千分符配置。
      • sign 标识符。
      • format 自定义格式化方法。
    • decimalFold 小数 0 折叠配置。
      • threshold 折叠阈值。
      • format 自定义格式化方法。

返回值

init 返回一个图表实例对象 Chart

用法

基本使用

自定义布局

内置语言

自定义扩展语言

设置时区

内置样式模版

自定义样式模版

样式直接覆盖

自定义时间显示

自定义大数字显示

不显示千分符

自定义千分符显示

小数 0 不折叠

小数 0 折叠自定义显示