图表API
init(ds, options)
(
ds: string | HTMLElement,
options?: {
layout?: Array<{
type: 'candle' | 'indicator' | 'xAxis'
content: Array<Indicator | string>
options: {
id?: string
height?: number
minHeight?: number
dragEnabled?: boolean
position?: 'top' | 'bottom'
gap?: {
top?: number
bottom?: number
}
axisOptions?: {
name?: string
scrollZoomEnabled?: boolean
}
}
}>
locale?: string
styles?: string | object
timezone?: string
customApi?: {
formatDate?: (dateTimeFormat: Intl.DateTimeFormat, timestamp: number, format: string, type: number) => string
formatBigNumber?: (value: string | number) => string
}
thousandsSeparator?: string
decimalFoldThreshold?: number
}
) => Chart
初始化一个图表,返回图表实例。
ds
容器,可以是dom元素或者元素id。options
可选配置项。layout
自定义布局,content
中的内容和options
参考实例方法 createIndicator 中的入参value
和options
。 ^9.6.0locale
语言,内置支持zh-CN
和en-US
。timezone
时区名,如'Asia/Shanghai',如果不设置会自动获取本机时区,时区对应名字列表请参阅时区列表。styles
可以是通过klinecharts.registerStyles
注册的样式名,也可以是object,样式列表,详情参阅样式,支持增量。customApi
自定义一些api。formatDate
格式化日期。formatBigNumber
格式化大的数字,如1000转换成1k,1000000转换为1M等。
thousandsSeparator
千分符decimalFoldThreshold
小数折叠阈值 ^9.8.0
dispose(dcs)
(dcs: HTMLElement | Chart | string) => void
销毁一个图表,一旦销毁,图表将不再可用。
dcs
可以是dom元素、元素id或者图表实例。
registerLocale(locale, locales)
(
locale: string,
locales: {
time: string
open: string
high: string
low: string
close: string
volume: string
}
) => void
添加一个本地化语言。图表内置了zh-CN
和en-US
。
locale
语言名locales
语言配置
getOverlayClass()
(name: string) => Nullable<OverlayConstructor>
根据覆盖物名称获取图表内覆盖物的属性。
getSupportedLocales()
() => string[]
获取图表支持的本地化语言类型。
registerStyles(name, styles)
(
name: string,
styles: object
) => void
添加一个样式配置。
name
样式名styles
样式配置,类型参阅样式,支持增量。
registerFigure(figure)
(
figure: {
name: string
draw: (ctx: CanvasRenderingContext2D, attrs: any, styles: object) => void
checkEventOn: (coordinate: Coordinate, attrs: any, styles: object) => boolean
}
) => void
添加一个基础图形。
figure
基础图形信息,详情参阅基础图形name
名字,唯一标识draw
绘制方法checkEventOn
检查事件是否在图形上
getSupportedFigures()
() => string[]
获取图表支持的基础图形类型。
getFigureClass(name)
(name: string) => Figure
获取图形类
name
图形名
registerIndicator(indicator)
(
indicator: {
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
attrs?: ({
data: object
coordinate: object
bounding: object
barSpace: object
xAxis: object
yAxis: object
}) => object
styles?: (
data: object,
indicator: object,
defaultStyles: object
) => object
}>
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
) => object
attrs: (
coordinate: object
bounding: Bounding
barSpace: BarSpace
xAxis: XAxis
yAxis: YAxis
) => object
}>
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
}
) => void
添加一个技术指标。
indicator
技术指标信息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
自定义绘制方法
getSupportedIndicators()
() => string[]
获取图表支持的技术指标
registerOverlay(overlay)
(
overlay: {
name: string
totalStep?: number
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
createPointFigures?: (params: object) => {
key?: string
type: string
attrs: any | any[]
styles?: any
ignoreEvent?: boolean | OverlayFigureIgnoreEventType[]
} | Array<{
key?: string
type: string
attrs: any | any[]
styles?: any
ignoreEvent?: boolean | OverlayFigureIgnoreEventType[]
}>
createXAxisFigures?: (params: object) => {
key?: string
type: string
attrs: any | any[]
styles?: any
ignoreEvent?: boolean | OverlayFigureIgnoreEventType[]
} | Array<{
key?: string
type: string
attrs: any | any[]
styles?: any
ignoreEvent?: boolean | OverlayFigureIgnoreEventType[]
}>
createYAxisFigures?: (params: object) => {
key?: string
type: string
attrs: any | any[]
styles?: any
ignoreEvent?: boolean | OverlayFigureIgnoreEventType[]
} | Array<{
key?: string
type: string
attrs: any | any[]
styles?: any
ignoreEvent?: boolean | OverlayFigureIgnoreEventType[]
}>
performEventPressedMove?: (params: object) => void
performEventMoveForDrawing?: (params: object) => void
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
}
) => void
添加一个覆盖物。
overlay
覆盖物信息,详情参阅覆盖物name
覆盖物名,用于创建的唯一标识totalStep
总的实现步骤lock
是否锁定不让拖动visible
是否可见zLevel
绘制层级,值越大,越靠前显示needDefaultPointFigure
是否需要默认的点对应的图形needDefaultXAxisFigure
是否需要默认的x轴上的图形needDefaultYAxisFigure
是否需要默认的y轴上的图形mode
模式,可选项有'normal','weak_magnet'和'strong_magnet'modeSensitivity
模式灵敏度,仅 mode 是 weak_magnet 时有效 ^9.5.0points
点信息extendData
扩展数据styles
样式createPointFigures
创建点对应的图形createXAxisFigures
创建x轴上的图形createYAxisFigures
创建y轴上的图形performEventPressedMove
按住移动事件特殊处理方法performEventMoveForDrawing
移动事件过程中特殊处理方法onDrawStart
开始绘制事件onDrawing
绘制中事件onDrawEnd
绘制结束事件onClick
点击事件onDoubleClick
双击事件 ^9.5.0onRightClick
右击事件onPressedMoveStart
按住开始移动事件onPressedMoving
按住移动中事件onPressedMoveEnd
按住移动结束事件onMouseEnter
鼠标移入事件onMouseLeave
鼠标移出事件onRemoved
删除事件onSelected
选中事件onDeselected
取消选中事件
getSupportedOverlays()
() => string[]
获取图表支持的覆盖物
registerXAxis(axis) ^9.8.0
(
axis: {
name: string
createTicks: (params: object) => Array<{
coord: number
value: number | string
text: string
}>
}
) => void
添加一个自定义x轴。
axis
坐标信息name
坐标轴名字createTicks
创建分割文字
registerYAxis(axis) ^9.8.0
(
axis: {
name: string
createTicks: (params: object) => Array<{
coord: number
value: number | string
text: string
}>
}
) => void
添加一个自定义y轴。
axis
坐标信息name
坐标轴名字createTicks
创建分割文字
version()
() => string
获取图表当前版本号。
utils
辅助方法集合。
utils.clone(target)
(target: any) => any
深度复制。
utils.merge(target, source)
(target: object, source: object) => void
将一个对象合并到另一个对象。
utils.isString(value)
(value: any) => boolean
检查某个值是否是字符串。
utils.isNumber(value)
(value: any) => boolean
检查某个值是否是数字。
utils.isValid(value)
(value: any) => boolean
检查某个值是否有效。
utils.isObject(value)
(value: any) => boolean
检查某个值是否是对象。
utils.isFunction(value)
(value: any) => boolean
检查某个值是否是方法。
utils.isBoolean(value)
(value: any) => boolean
检查某个值是否是bool值。
utils.formatValue(value, key, defaultValue)
(data: any, key: string, defaultValue?: any) => any
从某个值取对应的值,支持嵌套,如const o = { a: { b: { c: 1 } } }
,formatValue(o, 'a.b.c')
取c
的值。
utils.formatPrecision(value)
(value: string | number, precision?: number) => string
格式化精度。
utils.formatBigNumber(value)
(value: string | number) => string
格式化大的数字,如1000转换成1k,1000000转换为1M等。
utils.formatDate(dateTimeFormat, timestamp, format)
(dateTimeFormat: Intl.DateTimeFormat, timestamp: number, format: string) => string
格式化日期。format
格式,如'YYYY-MM-DD HH:mm:ss'。
utils.formatThousands(value, sign)
(value: string | number, sign: string) => string
格式化日期千分符。
utils.formatFoldDecimal(value, threshold) ^9.8.0
(value: string | number, threshold: number) => string
格式化折叠小数。
utils.calcTextWidth(text, size, weight, family) ^9.3.0
(text: string, size?: number, weight?: string | number, family?: string) => number
计算文字宽度
utils.getLinearSlopeIntercept(coordinate1, coordinate2)
(
coordinate1: {
x: number
y: number
},
coordinate2: {
x: number
y: number
}
) => []
根据两个坐标点,获取点组成的线的斜率和常数项,即y = kx + b
中的k
和b
。
utils.getLinearYFromCoordinates(coordinate1, coordinate2, targetCoordinate)
(
coordinate1: {
x: number
y: number
},
coordinate2: {
x: number
y: number
}
targetCoordinate: {
x: number
y: number
}
) => number
获取一个点在另外两个坐标点形成的线上的y轴坐标值。
utils.getLinearYFromSlopeIntercept(kb, targetCoordinate)
(
kb: Array<number>,
targetCoordinate: {
x: number
y: number
}
) => number
获取一个点在斜率和常数项形成的线上的y轴坐标值。
utils.checkCoordinateOnArc(coordinate, arc)
(
coordinate: {
x: number
y: number
},
arc: {
x: number
y: number
r: number
startAngle: number
endAngle: number
}
) => boolean
检查某个坐标点是否在圆弧上。
coordinate
坐标点信息arc
圆弧参数x
圆心的x轴值y
圆心的y轴值r
半径startAngle
起始角度endAngle
结束角度
utils.checkCoordinateOnCircle(coordinate, circle)
(
coordinate: {
x: number
y: number
},
circle: {
x: number
y: number
r: number
}
) => boolean
检查某个坐标点是否在圆上。
coordinate
坐标点信息circle
圆参数x
圆心的x轴值y
圆心的y轴值r
半径
utils.checkCoordinateOnLine(coordinate, line)
(
coordinate: {
x: number
y: number
},
line: {
coordinates: Array<{
x: number
y: number
}>
}
) => boolean
检查某个坐标点是否在线上。
utils.checkCoordinateOnPolygon(coordinate, polygon)
(
coordinate: {
x: number
y: number
},
polygon: {
coordinates: Array<{
x: number
y: number
}>
}
) => boolean
检查某个坐标点是否在多边形上。
utils.checkCoordinateOnRect(coordinate, rect)
(
coordinate: {
x: number
y: number
},
rect: {
x: number
y: number
width: number
height: number
}
) => boolean
检查某个坐标点是否在矩形上。
coordinate
坐标点信息rect
矩形参数x
起始点x轴值y
起始点y轴值width
宽度height
高度
utils.checkCoordinateOnText(coordinate, text, styles)
(
coordinate: {
x: number
y: number
},
text: {
x: number
y: number
text: any
align?: 'center' | 'end' | 'left' | 'right' | 'start'
baseline?: 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top'
},
styles: {
color?: string
size?: number
family?: string
weight?: number | string
}
) => boolean
检查某个坐标点是否在文字上。
coordinate
坐标点信息text
文字参数x
起始点x轴值y
起始点y轴值text
文字内容align
水平对齐方式baseline
垂直对齐方式
styles
样式color
颜色size
尺寸family
字体weight
权重
utils.drawArc(ctx, arc, styles)
(
ctx: CanvasRenderingContext2D,
arc: {
x: number
y: number
r: number
startAngle: number
endAngle: number
},
styles: {
style?: 'solid' | 'dashed'
size?: number
color?: string
dashedValue?: number[]
}
) => void
绘制圆弧。
ctx
画布上下文arc
圆弧参数x
圆心的x轴值y
圆心的y轴值r
半径startAngle
起始角度endAngle
结束角度
styles
样式style
弧样式size
粗细color
颜色dashedValue
虚线参数值
utils.drawCircle(ctx, circle, styles)
(
ctx: CanvasRenderingContext2D,
circle: {
x: number
y: number
r: number
},
styles: {
style?: 'stroke' | 'fill' | 'stroke_fill'
color?: string | CanvasGradient
borderColor?: string
borderSize?: number
borderStyle?: 'solid' | 'dashed'
borderDashedValue?: Array<number>
}
) => void
绘制圆。
ctx
画布上下文circle
圆参数x
圆心的x轴值y
圆心的y轴值r
半径
styles
样式style
样式color
颜色borderColor
边框颜色borderSize
边框粗细borderStyle
边框样式borderDashedValue
边框虚线参数值
utils.drawLine(ctx, line, styles)
(
ctx: CanvasRenderingContext2D,
line: {
coordinates: Array<{
x: number
y: number
}>
},
styles: {
style?: 'solid' | 'dashed'
size?: number
color?: string
dashedValue?: number[]
}
) => void
绘制线。
ctx
画布上下文line
线参数styles
样式style
线样式size
粗细color
颜色dashedValue
虚线参数值
utils.drawPolygon(ctx, polygon, styles)
(
ctx: CanvasRenderingContext2D,
polygon: {
coordinates: Array<{
x: number
y: number
}>
},
styles: {
style?: 'stroke' | 'fill' | 'stroke_fill'
color?: string | CanvasGradient
borderColor?: string
borderSize?: number
borderStyle?: 'solid' | 'dashed'
borderDashedValue?: Array<number>
}
) => void
绘制多边形。
ctx
画布上下文polygon
多边形参数styles
样式style
样式color
颜色borderColor
边框颜色borderSize
边框粗细borderStyle
边框样式borderDashedValue
边框虚线参数值
utils.drawRect(ctx, rect, styles)
(
ctx: CanvasRenderingContext2D,
rect: {
x: number
y: number
width: number
height: number
},
styles: {
style?: 'stroke' | 'fill' | 'stroke_fill'
color?: string | CanvasGradient
borderColor?: string
borderSize?: number
borderStyle?: 'solid' | 'dashed'
borderDashedValue?: Array<number>
borderRadius?: number
}
) => void
绘制矩形。
ctx
画布上下文rect
矩形参数x
起始点x轴值y
起始点y轴值width
宽度height
高度
styles
样式style
样式color
颜色borderColor
边框颜色borderSize
边框粗细borderStyle
边框样式borderDashedValue
边框虚线参数值borderRadius
边框圆角值
utils.drawText(ctx, text, styles)
(
ctx: CanvasRenderingContext2D,
text: {
x: number
y: number
text: any
width?: number
height?: number
align?: 'center' | 'end' | 'left' | 'right' | 'start'
baseline?: 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top'
},
styles: {
style?: 'stroke' | 'fill' | 'stroke_fill'
color?: string
size?: number
family?: string
weight?: number | string
paddingLeft?: number
paddingTop?: number
paddingRight?: number
paddingBottom?: number
borderStyle?: 'solid' | 'dashed'
borderDashedValue?: number[]
borderSize?: number
borderColor?: string
borderRadius?: number
backgroundColor?: string
}
) => void
绘制带背景的文字。
ctx
画布上下文attrs
文字参数x
起始点x轴值y
起始点y轴值text
文字内容width
宽度height
高度align
水平对齐方式baseline
垂直对齐方式
styles
样式style
样式color
颜色size
尺寸family
字体weight
权重paddingLeft
左内边距,paddingTop
上内边距,paddingRight
右内边距,paddingBottom
下内边距,borderColor
边框颜色borderSize
边框粗细borderStyle
边框样式borderRadius
边框圆角尺寸borderDashedValue
边框虚线参数值backgroundColor
背景色
utils.drawRectText(ctx, rectText, styles)
同utils.drawText(ctx, text, styles)
,已废弃,v10之后会删除,请用utils.drawText(ctx, text, styles)
代替。