最近组长要我先去探探路，后期可能需要在后台管理系统中画k线，和webscoket结合，二者最近我都一些demo，感觉还行
官网
Vue中初始化使用
npm install klinecharts --save
<div id="init-kline" />
import { dispose, init } from "klinecharts";
// 一般在mountd周期初始化,在destroyed周期清除
mounted(){
this.kLineChart = init("init-kline", {
// init的第二参数为一个对象(options)，主要是图表的样式,具体可以看下面的样式配置tag
// 第二个参数也可以不写，也可以通过setStyleOptions(options)来定义
candle: {
type:candle_solid
}
});
this.kLineChart.applyNewData([
{
open: 111, // 开盘价，必要字段
close: 111, // 收盘价，必要字段
high: 111, // 最高价，必要字段
low: 111, // 最低价，必要字段
volume: 12, // 成交量，非必须字段
turnover: 1234, // 成交额，非必须字段，如果需要展示技术指标'EMV'和'AVP'，则需要为该字段填充数据
timestamp: 1610188586000 // 时间戳，毫秒级别，必要字段
}
{
..........
}
// 多个同上面的对象，作为数组的元素，且对象中的属性必须按以上的格式
])
}
destroyed () {
dispose("update-k-line");
},
样式配置
可通过init方法的第二个参数或者调用setStyleOptions(option)设置样式，以下是对象中的属性样式设置
grid 网格线
grid: {
show: true,
// 网格水平线
horizontal: {
show: true,
size: 1,
color: '#393939',
style: 'dash', // 'solid'|'dash'
dashValue: [2, 2]
},
// 网格垂直线
vertical: {
show: false,
size: 1,
color: '#393939',
style: 'dash', // 'solid'|'dash'
dashValue: [2, 2]
}
},
candle 蜡烛图
// 蜡烛图
candle: {
// 蜡烛图上下间距，大于1为绝对值，大于0小余1则为比例
margin: {
top: 0.2,
bottom: 0.1
},
// 蜡烛图类型 'candle_solid'|'candle_stroke'|'candle_up_stroke'|'candle_down_stroke'|'ohlc'|'area'
type: 'candle_solid',
// 蜡烛柱提颜色
bar: {
upColor: '#26A69A',
downColor: '#EF5350',
noChangeColor: '#888888'
},
// 面积图，只有当type为'area'时，当有效
area: {
lineSize: 2,
lineColor: '#2196F3',
value: 'close',
backgroundColor: [{
offset: 0, //下半区颜色
color: 'rgba(33, 150, 243, 0.01)'
}, {
offset: 1, //上半区颜色
color: 'rgba(33, 150, 243, 0.2)'
}]
},
// 价格标记
priceMark: {
show: true, //是否展示
high: { // 最高价标记
show: true,
color: '#D9D9D9',
textMargin: 5,
textSize: 10,
textFamily: 'Helvetica Neue',
textWeight: 'normal'
},
low: { // 最低价标记
show: true,
color: '#D9D9D9',
textMargin: 5,
textSize: 10,
textFamily: 'Helvetica Neue',
textWeight: 'normal',
},
last: { // 最新价标记
show: true,
upColor: '#26A69A',
downColor: '#EF5350',
noChangeColor: '#888888',
line: {
show: true,
style: 'dash', // 'solid'|'dash'
dashValue: [4, 4], // 虚线时的紧密程度
size: 1
},
text: { //最新价的字体样式
show: true,
size: 12,
paddingLeft: 2,
paddingTop: 2,
paddingRight: 2,
paddingBottom: 2,
color: '#FFFFFF',
family: 'Helvetica Neue',
weight: 'normal',
borderRadius: 2
}
}
},
// 提示 (顶部文案)
tooltip: {
// follow_cross是指图表失焦时不展示顶部文案
showRule: 'always', // 'always' | 'follow_cross' | 'none'
// rect是指顶部文案垂直排列
showType: 'standard', // 'standard' | 'rect'
labels: ['时间', '开', '收', '高', '低', '成交量'],
values: null,
defaultValue: 'n/a',
rect: { //垂直时排列样式
paddingLeft: 0,
paddingRight: 0,
paddingTop: 0,
paddingBottom: 6,
offsetLeft: 8,
offsetTop: 8,
offsetRight: 8,
borderRadius: 4,
borderSize: 1,
borderColor: '#3f4254',
backgroundColor: 'rgba(17, 17, 17, .3)'
},
text: { // 字体样式
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
color: '#D9D9D9',
marginLeft: 8,
marginTop: 6,
marginRight: 8,
marginBottom: 0
}
}
},
}
technicalIndicator 技术指标
// 技术指标，可在图表中在添加一种展示方式
technicalIndicator: {
margin: {
top: 0.2,
bottom: 0.1
},
bar: {
upColor: '#26A69A',
downColor: '#EF5350',
noChangeColor: '#888888'
},
line: {
size: 1,
colors: ['#FF9600', '#9D65C9', '#2196F3', '#E11D74', '#01C5C4']
},
circle: {
upColor: '#26A69A',
downColor: '#EF5350',
noChangeColor: '#888888'
},
// 最新值标记
lastValueMark: {
show: false,
text: {
show: false,
color: '#ffffff',
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
paddingLeft: 3,
paddingTop: 2,
paddingRight: 3,
paddingBottom: 2,
borderRadius: 2
}
},
// 提示
tooltip: {
// 'always' | 'follow_cross' | 'none'
showRule: 'always',
// 'standard' | 'rect'
showType: 'standard',
showName: true,
showParams: true,
defaultValue: 'n/a',
text: {
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
color: '#D9D9D9',
marginTop: 6,
marginRight: 8,
marginBottom: 0,
marginLeft: 8
}
}
},
x轴
xAxis: {
show: true,
height: null,
// x轴线
axisLine: {
show: true,
color: '#888888',
size: 1
},
// x轴分割文字
tickText: {
show: true,
color: '#D9D9D9',
family: 'Helvetica Neue',
weight: 'normal',
size: 12,
paddingTop: 3,
paddingBottom: 6
},
// x轴分割线
tickLine: {
show: true,
size: 1,
length: 3,
color: '#888888'
}
},
图表API
init(ds, options)
初始化一个图表，返回图表实例。
ds 可以是dom元素和元素id中的一种
options 样式配置，详情可参阅下面的样式配置或官网[样式配置](https://klinecharts.com/zh-CN/guide/style)
dispose(dcs)
销毁一个图表，一旦销毁，图表将不再可用。
dcs 可以是div节点、节点id和图表实例中的一种
extension.addTechnicalIndicatorTemplate(template)
全局添加一个技术指标。
template 技术指标信息，详情参阅[技术指标](https://klinecharts.com/zh-CN/advanced)
extension.addShapeTemplate(template)
全局添加一个图形模板。
template 图形模板，详情参阅[图形](https://klinecharts.com/zh-CN/advanced/shape)
图表内容 API
this.kLineChart.getWidth()
以下的api调用方法同上，根据不同api传入不同参数
getDom(finder)
获取 dom 容器
finder过滤条件，选返回根容器{ paneId, position }
pandId 窗口 id
position 位置，可选参数'root'，'content'和'yAxis'
getWidth()
获取图表宽度。
getHeight()
获取图表高度。
setStyleOptions(options)
设置样式配置，传一个对象。
options 样式配置，详情可参阅上面的样式配置或官网样式配置https://klinecharts.com/zh-CN/guide/style
getStyleOptions()
获取样式配置。
setPriceVolumePrecision(pricePrecision, volumePrecision)
设置价格和数量精度，同时技术指标系列是'price'或者'volume'也会受影响
pricePrecision 价格精度
volumePrecision 数量精度
setTimezone(timezone)
设置时区。
imezone 时区名，如'Asia/Shanghai'，如果不设置会自动获取本机时区，时区对应名字列表请自寻查找相关文档
setZoomEnabled(enabled)
设置是否缩放。
enabled true 或 false
isZoomEnabled()
是否可以缩放。
setScrollEnabled(enabled)
设置是否可以拖拽滚动。
enabled true 或 false
isScrollEnabled()
是否可以拖拽滚动。
setOffsetRightSpace(space)
设置图表右边可以空出来的间隙。
space 距离大小，number 类型
setLeftMinVisibleBarCount(barCount)
设置左边最小可见的蜡烛数量。
barCount 数量，number 类型
setRightMinVisibleBarCount(barCount)
设置右边最小可见的蜡烛数量。
barCount 数量，number 类型
applyNewData(dataList, more)
添加新数据，此方法会清空图表数据，不需要额外调用 clearData 方法。
dataList 是一个 KLineData 数组，KLineData 类型详情可参阅数据源
more 告诉图表还有没有更多历史数据，可选，默认为 true
applyMoreData(dataList, more)
添加历史更多数据。
dataList 是一个 KLineData 数组，KLineData 类型详情可参阅数据源
more 告诉图表还有没有更多历史数据，可选，默认为 true
updateData(data)
更新数据，目前只会匹配当前最后一条数据的时间戳，相同则覆盖，不同则追加。
data 单条k线数据（规定对象格式）
getDataList()
获取图表目前的数据源。
clearData()
清空图表数据，一般情况下清空数据是为了添加新的数据，为了避免重复绘制，所有这里只是清除数据，图表不会重绘
cb 是一个回调方法，回调参数为第一条数据的时间戳
技术指标 API
createTechnicalIndicator(value, isStack, paneOptions)
创建一个技术指标，返回值是一个标识窗口的字符串，这非常重要，后续对该窗口的一些操作，都需要此标识。
value 技术指标名或者技术指标对象 ，其具体的值参考https://klinecharts.com/zh-CN/advanced
isStack 是否覆盖
paneOptions 窗口配置信息，可选, 例如：{ id, height, minHeight, dragEnabled }
paneId: candle_pane，窗口 id ，可选
height 窗口高度 ，可选
minHeight 窗口最小高度，可选
dragEnbaled 窗口是否可以拖拽调整高度，可选
示例：
// 其效果会在图表中在生成一种展示形式，蜡烛图和线图两种展示形式
this.kLineChart.init(....)
this.kLineChart.createTechnicalIndicator("MA", false, {id: "candle_pane"});
// 其效果会在图表底部在生成一个高度为80的数据线图
this.kLineChart.createTechnicalIndicator("KDJ", false, { height: 80 });
overrideTechnicalIndicator(override, paneId)
覆盖技术指标信息。
override需要覆盖的一些参数，{ name, calcParams, shouldOhlc, shouldFormatBigNumber, precision, styles, extendData }
paneId 窗口id，无参则设置所有
- name 技术指标名，必填字段
- calcParams 计算参数，可选
- shouldOhlc 是否需要 ohlc 辅助线，可选
- shouldFormatBigNumber 是否需要格式化大数字，可选
- precision 精度，可选
- styles 样式，可选，格式同样式配置中 technicalIndicator 一致
- extendData 拓展数据，可选，可以是方法，也可以是普通数据
示例：
chart.overrideTechnicalIndicator(
{
name: 'BOLL',
calcParams: [20, { value: 5.5, allowDecimal: true }],
precision: 4,
shouldOhlc: true,
shouldFormatBigNumber: false,
styles: {
margin: {
top: 0.2,
bottom: 0.1,
},
bar: {
upColor: '#26A69A',
downColor: '#EF5350',
noChangeColor: '#888888',
},
line: {
size: 1,
colors: ['#FF9600', '#9D65C9', '#2196F3', '#E11D74', '#01C5C4'],
},
circle: {
upColor: '#26A69A',
downColor: '#EF5350',
noChangeColor: '#888888',
},
},
extendData: () => 99999,
},
'candle_pane',
);
getTechnicalIndicatorTemplate(name)
根据技术指标模板信息。
name 技术指标名，可选，无参则返回所有
getTechnicalIndicatorByPaneId(paneId, name)
根据窗口 id 获取技术指标信息。
paneId 窗口id，可选，无参则返回所有，'candle_pane'
name 技术指标名
removeTechnicalIndicator(paneId, name)
移除技术指标。
paneId 窗口 id，即调用 createTechnicalIndicator 方法时返回的窗口标识
name 技术指标类型，如果不写，则会移除所有
图形 API
createShape(value, paneId)
创建图形标记，返回一个字符串类型的标识shapeId。
value图形标记名或者对象，当是对象时，参数为{ name, id, points, styles, lock, mode, data, onDrawStart, onDrawing, onDrawEnd, onClick, onRightClick, onPressedMove, onRemove }
paneId 窗口id，可选
- name 技术指标名
- id 可选，如果指定，则返回该 id
- points 点信息，可选，如果指定，则会按照点信息绘制一个图形
- styles 样式，可选，格式同样式配置中 shape 一致
- lock 是否锁定
- mode 模式类型，类型为'normal' | 'weak_magnet' | 'strong_magnet'
- data 数据
- onDrawStart 绘制开始回调事件，可选
- onDrawing 绘制过程中回调事件，可选
- onDrawEnd 绘制结束回调事件，可选
- onClick 点击回调事件，可选
- onRightClick 右击回调事件，可选，需要返回一个 boolean 类型的值，如果返回 true，内置的右击删除将无效
- onMouseEnter 鼠标移入事件，可选
- onMouseLeave 鼠标移出事件，可选
- onPressedMove 按住拖动回调事件，可选
- onRemove 删除回调事件，可选
示例：
chart.createShape({
name: 'segment',
points: [
{ timestamp: 1614171282000, value: 18987 },
{ timestamp: 1614171202000, value: 16098 },
],
styles: {
line: {
color: '#f00',
size: 2,
},
},
lock: false,
mode: 'weak_magnet',
data: 'xxxxxxxx',
onDrawStart: function ({ id }) {
console.log(id);
},
onDrawing: function ({ id, step, points }) {
console.log(id, step, points);
},
onDrawEnd: function ({ id }) {
console.log(id);
},
onClick: function ({ id, event }) {
console.log(id, event);
},
onRightClick: function ({ id, event }) {
console.log(id, event);
return false;
},
onMouseEnter: function ({ id, event }) {
console.log(id, event);
},
onMouseLeave: function ({ id, event }) {
console.log(id, event);
},
onPressedMove: function ({ id, event }) {
console.log(id, event);
},
onRemove: function ({ id }) {
console.log(id);
},
});
getShape(shapeId)
获取图形标记信息。
- paneId 窗口 id，调用 createShape 方法是返回的标识
- shapeId 调用 createShape 方法是返回的标识
setShapeOptions(options)
设置已绘制的图形标记配置。
options配置，{ id, points, styles, lock, mode, data }
- id 图形标记标识，选则设置所有的
- points 点
- styles 样式，可选，格式同样式配置中 shape 一致
- lock 是否锁定，可选
- mode 模式类型，可选，类型为'normal' | 'weak_magnet' | 'strong_magnet'
- data 外部数据
addShapeTemplate(template)
添加图形模板，可批量创建，批量传入数组即可。
template 图形模板，详细请参考[详情](https://klinecharts.com/zh-CN/advanced/shape)
removeShape(shapeId)
移除图形。
shapeId 调用 createShape 方法是返回的标识，如果选，则会移除所有标记
标签 API
createTag(tag, paneId)
创建标签，可批量创建，批量传入数组即可。
tag标签 { id, point, text, mark, styles }
paneId 窗口id
- id 唯一标识，如果有重复的，则会覆盖
- point 点信息，可选
- mark 标记，可选
- text 文字，可选
- styles 样式，可选，格式和配置里的 tag 一致
- 示例:
chart.createTag({
id: 'bid_price',
point: { value: 16908 },
text: '16908.00',
mark: 'bid',
styles: {
position: 'point',
offset: 0,
line: {
show: true,
style: LineStyle.DASH,
dashValue: [4, 2],
size: 1,
color: '#2196F3',
},
text: {
color: '#FFFFFF',
backgroundColor: '#2196F3',
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
paddingLeft: 2,
paddingRight: 2,
paddingTop: 2,
paddingBottom: 2,
borderRadius: 2,
},
mark: {
color: '#FFFFFF',
backgroundColor: '#2196F3',
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
paddingLeft: 2,
paddingRight: 2,
paddingTop: 2,
paddingBottom: 2,
borderRadius: 2,
},
},
});
createHtml(html, paneId)8.2.0
创建一个 html 元素，返回一个 id。
html元素 { id, position, content, style }
paneId 窗口id
- id
- position 位置，类型为 yAxis 和 content ，默认为 content
- style html 元素容器的样式，内联 css 样式
- content 内容，可以是 dom 元素，也可以是 dom 元素组成的字符串
chart.createHtml(
{
id: 'html_1',
position: 'content',
style: { zIndex: 12 },
content: '<div>8888888</div>',
},
'candle_pane',
);
removeHtml(paneId, htmlId)
删除一个 html 元素
paneId 窗口id，选则删除所有
htmlId 创建时候的id，可以是单个id，也可以是 id 组成的数组，选则删除对应窗口上所有的
滚动及坐标API
scrollToRealTime(animationDuration)
滚动到最初的位置。
animationDuration 动画时间，可以选，不写则无动画
scrollToDataIndex(dataIndex, animationDuration)
滚动到指定的位置。
dataIndex 数据的索引
animationDuration 动画时间，可以选，不写则无动画
scrollToTimestamp(timestamp, animationDuration)
滚动到指定时间戳。
timestamp 时间戳
animationDuration 动画时间，可以选，不写则无动画
setPaneOptions(options)
设置窗口配置。
options窗口配置{ id, height, minHeight, dragEnabled }
- id 窗口 id
- height 窗口高度，可选
- minHeight 窗口最小高度，可选
- dragEnbaled 窗口是否可以拖拽调整高度，可选
示例：
chart.setPaneOptions({
id: 'pane_1',
height: 100,
minHeihgt: 50,
dragEnabled: true,
});
convertFromPixel(coordinate, finder)
将坐标转换成值。
coordinate 坐标， { x, y }
finder 过滤条件， { paneId, absoluteYAxis }
getConvertPictureUrl(includeOverlay, type, backgroundColor)
获取图表转换成图片后的图片 url。
includeTooltip 是否需要包含浮层，可选
type 转换后的图片类型，类型是'png'、'jpeg'、'bmp'三种中的一种，可选，默认为'jpeg'
backgroundColor 背景色，可选，默认为'#FFFFFF'
resize()
调整图表大小，总是会填充容器大小。
