Skip to content

init(ds, options?)

init 用于初始化一个图表。

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

参考

typescript
(
  ds: string | HTMLElement,
  options?: {
    layout?: {
      barSpaceLimit?: {
        min?: number
        max?: number
      }
      pane?: {
        height?: number
        minHeight?: number
        dragEnabled?: boolean
        order?: number
        state?: 'normal' | 'maximize' | 'minimize'
      }
      yAxis?: {
        reverse?: boolean
        inside?: boolean
        needWidget?: boolean
        position?: 'left' | 'right'
        scrollZoomEnabled?: boolean
        gap?: {
          top?: number
          bottom?: number
        }
      }
    }
    locale?: string
    styles?: string | DeepPartial<Styles>
    timezone?: string
    formatter?: {
      formatDate?: (params: {
        dateTimeFormat: Intl.DateTimeFormat
        timestamp: number
        template: string
        type: 'tooltip' | 'crosshair' | 'xAxis'
      }) => string
      formatBigNumber?: (value: string | number) => string
      formatExtendText?: (params: {
        type: 'last_price'
        data: KLineData
        index: number
      }) => string
    }
    thousandsSeparator?: {
      sign?: string
      format: (value: number | string) => string
    }
    decimalFold?: {
      threshold?: number
      format?: (value: number | string) => string
    }
    zoomAnchor?: 'cursor' | 'last_bar' | { main?: 'cursor' | 'last_bar', xAxis?: 'cursor' | 'last_bar' }
    hotkey?: {
      enabled?: boolean
      exclude?: string[]
    }
  }
) => Chart

参数

  • ds 容器,可以是dom元素或者元素id。
  • options 可选配置项。
    • layout 自定义布局配置。
      • barSpaceLimit 柱间距限制。
        • min 柱间距最小值。
        • max 柱间距最大值。
      • pane 默认窗口配置。
        • height 高度。
        • minHeight 最小高度。
        • dragEnabled 是否可以拖拽调整高度。
        • order 顺序。
        • state 状态,支持 normalmaximizeminimize
      • yAxis 默认 y 轴配置。
        • reverse 是否反向。
        • inside 是否在内部。
        • needWidget 是否需要创建轴组件。
        • position 位置,支持 leftright
        • scrollZoomEnabled 是否允许在 Y 轴上滚动和缩放。
        • gap 上下边距配置。
          • top 上边距。
          • bottom 下边距。
    • locale 语言,内置支持 zh-CNen-US
    • timezone 时区名,如 Asia/Shanghai ,如果不设置会自动获取本机时区,时区对应名字列表请参阅 时区列表
    • styles 可以是通过 klinecharts.registerStyles 注册的样式名,也可以是 StylesStyles 详情参阅 样式 ,支持增量。
    • formatter 一些格式化api。
      • formatDate 格式化日期。
      • formatBigNumber 格式化大的数字,如1000转换成1k,1000000转换为1M等。
      • formatExtendText 格式化扩展文案。
    • thousandsSeparator 千分符配置。
      • sign 标识符。
      • format 自定义格式化方法。
    • decimalFold 小数 0 折叠配置。
      • threshold 折叠阈值。
      • format 自定义格式化方法。
    • zoomAnchor 缩放锚点位置,可以是 last_barcursor ,或分别配置主图和 x 轴的对象 { main, xAxis }
    • hotkey 快捷键配置。
      • enabled 是否启用快捷键。
      • exclude 排除的全局快捷键名称列表。

返回值

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

用法

基本使用

内置语言

自定义扩展语言

设置时区

内置样式模版

自定义样式模版

样式直接覆盖

自定义时间显示

自定义大数字显示

不显示千分符

自定义千分符显示

小数 0 不折叠

小数 0 折叠自定义显示

缩放位置