本文详细介绍了HQChart K线图控件的操作函数，包括周期切换、切换股票、指定显示起始日期、切换指标等。还说明了叠加股票、K线切换类型、坐标切换等功能的使用方法，以及注册事件监听、设置颜色风格等全局设置，最后给出了HQChart代码地址。
K线图控件操作函数说明
注：所有这些操作(除了全局函数)必须在图形创建完成并且调用SetOption()以后.
var Chart=JSChart.Init(divKLine); //把K线图绑定到一个Div上
Chart.SetOption(this.Option);
//初始设置了以后就可以调用操作函数来控制K线图
周期切换
Chart.ChangePeriod(周期值整型)
//周期值
0=日线 1=周线 2=月线 3=年线 9=季线 21=双周 [40001-50000) 自定义日线
4=1分钟 5=5分钟 6=15分钟 7=30分钟 8=60分钟 11=120分钟 12=240分钟 [20001-30000) 自定义分钟
10=分笔线 （小程序不支持)
30001-32000 自定义秒
切换股票
Chart.ChangeSymbol(symbol, option)
symbol 字符串股票代码 ， 代码.市场后缀 上海=sh 深证=sz
option 额外配置
指定显示起始日期(K线)
//格式说明
{
Date: //起始日期 数值类型 yyyymmdd
Time: //起始时间 数值类型 (可以缺省， 如果缺省就只配置日期)
PageSize: //一屏显示的数据个数 （缺省使用当前屏数据个数)
Position: //移动位置 0=左边 1=屏幕中间位置 （缺省0)
}
//调用示例
var option={ CustomShow:{ Date:20230501, PageSize:60}} ;
this.Chart.ChangeSymbol("600000.sh",option);
切换指标
Chart.ChangeIndex(windowIndex,indexName,option)
windowIndex 窗口索引 从0开始
indexName 指标唯一的ID
option 可选设置
{
StringFormat: 标题数据格式,
FloatPrecision: 小数位数,
Args: 参数列表数组,
IsShortTitle： 是否使用缩写标题
TitleFont:标题字体
//使用API挂接指标数据
API:{ Name:指标名字, Script:指标脚本可以为空, Args:参数可以为空, Url:指标执行地址 }
Window: //窗口属性设置 (可选)
{
Modify：true/false, //修改指标参数按钮
Change:true/false, //切换指标按钮
Close:true/false, //关闭指标窗口按钮
Overlay:true/false, //叠加指标按钮
HorizontalReserved:{ Top:上预留高度, Bottom:下预留高度 } //Y轴预留高度
},
Lock: //上锁
{
IsLocked: true,
......
}
}
增加一个窗口指标
AddIndexWindow
Chart.AddIndexWindow(indexName, option);
indexName
指标名称
option
可选设置
{
StringFormat: 标题数据格式,
FloatPrecision: 小数位数,
Args: 参数列表数组
IsShortTitle： 是否使用缩写标题
TitleFont:标题字体
Window: //窗口属性设置
{
Modify：true/false, //修改指标参数按钮
Change:true/false, //切换指标按钮
Close:true/false, //关闭指标窗口按钮
Overlay:true/false, //叠加指标按钮
Export:true/false, //导出按钮
MaxMin:true/false, //最大最小化按钮
TitleWindow:true/false, //标题栏模式按钮
IsDrawTitleBG: true/false, //指标名称增加背景色 并支持点击事件
IsShowNameArrow: true/false //指标名后增加箭头
},
IsShowLeftText:
IsShowRightText:
TitleHeight:
IsShowTitleArraw:
IsShowIndexName:
IsShowOverlayIndexName:
IndexParamSpace:
IsShowXLine:
IsShowYLine:
IsShowIndexTitle:
Height: 窗口高度比例
}
增加一个自定义通达信脚本指标窗口
AddScriptIndexWindow
Chart.AddScriptIndexWindow(indexInfo, option);
indexInfo
自定义指标内容
{ Name:指标名字 , Script:指标脚本, Args:参数, }
option
可选设置（参见AddIndexWindow中的option)
增加一个远程指标窗口
AddAPIIndexWindow
Chart.AddAPIIndexWindow(indexData, option);
indexData
远程指标信息
{ API:{ Name:指标名字, Script:指标脚本可以为空, Args:参数可以为空, Url:指标执行地址 } }
option
可选设置（参见AddIndexWindow中的option)
删除指标窗口
Chart.RemoveIndexWindow(id)
id 窗口索引id, 从0开始
注意 K线图第1个窗口是无法删除的, 分时图前2个窗口时无法删除的
切换自定义指标
Chart.ChangeScriptIndex(windowIndex,indexData)
windowIndex 窗口索引 从0开始
indexData 自定义指标 {Name：指标名字, Script：指标脚本, Args：指标参数（数组) }
切换复权
Chart.ChangeRight(right)
right 复权 0=不复权 1=前复权 2=后复权
叠加股票/取消叠加股票
叠加股票
Chart.OverlaySymbol(symbol, option)
symbol 需要叠加的股票代码字符串 h5支持多个股票叠加， app/小程序只支持叠加一个股票
K线叠加option配置
option={ YInfoType: 0=在Y轴不显示得叠加信息， 4=在Y轴显示叠加信息 , DrawType:叠加K线类型， Color:K线颜色 }
分时图option配置
optiion={ Color:线段颜色， OverlayType=0; //叠加方式 0=百分比叠加 1=绝对叠加 }
删除所有叠加股票
Chart.ClearOverlaySymbol() \\取消叠加股票
删除一个叠加股票
Chart.DeleteOverlaySymbol(symbol); //删除一个叠加股票
K线切换类型
Chart.ChangeKLineDrawType(drawType)
drawType K线切换类型 0=实心K线 1=收盘价线 2=美国线 3=空心K线
K线坐标切换
接口没有做， 直接去内部函数吧
Chart.JSChartContainer.ChangeCoordinateType(obj)
obj=
{
Type:0=普通坐标 1=百分比坐标 (右边坐标刻度) 2=对数对标 3=等比坐标
IsReverse: 是否反转坐标
}
设置指标窗口个数
Chart.ChangeIndexWindowCount (count)
count 窗口个数， 最多8个
五彩K线|交易指示 指标
这些指标都显示在主图窗口里
Chart.ChangeInstructionIndex(indexName)
indexName 五彩K线或交易指示 ID
取消五彩K线|交易指示 指标
Chart.CancelInstructionIndex()
自定义五彩K线|交易指示 指标
Chart.ChangeInstructionScriptIndex=function(indexData)
indexData 自定义指标 {Name：指标名字, Script：指标脚本, Args：指标参数（数组)， InstructionType： 指标类型 2=五彩K线 1=交易指示 }
信息地雷
目前支持 “互动易”,“大宗交易”,‘龙虎榜’,“调研”,“业绩预告”,“公告”
- 增加一个信息地雷
infoName 信息地雷名字 ( “互动易”,“大宗交易”,‘龙虎榜’,“调研”,“业绩预告”,“公告”)Chart.AddKLineInfo(infoName, bUpdate)
bUpdate 是否立即更新 - 删除一个信息地雷
infoName 删除信息地雷的名字Chart.DeleteKLineInfo(infoName) - 删除所有信息地雷
Chart.ClearKLineInfo()
移动当前屏K线数据到具体的某一天
Chart.SetFirstShowDate(obj)
obj=
{
Date:起始日期(必填),
PageSize:一屏显示的数据个数(可选),
Time:日期时间(可选),
Position:移动的位置, 0=左边， 1=屏幕中间位置
CursorIndex:标题栏显示的k线数据索引 （可选 默认0）
}
注册K线图事件监听事件
动态注册
Chart.AddEventCallback(obj)
obj { event:事件ID, callback:回调函数 }
目前支持一下事件监听
var JSCHART_EVENT_ID=
{
RECV_KLINE_MATCH:1, //接收到形态匹配
RECV_INDEX_DATA:2, //接收指标数据
RECV_HISTROY_DATA:3,//接收到历史数据
RECV_TRAIN_MOVE_STEP:4, //接收K线训练,移动一次K线
CHART_STATUS:5, //每次Draw() 以后会调用
BARRAGE_PLAY_END:6, //单个弹幕播放完成
RECV_OVERLAY_INDEX_DATA:7,//接收叠加指标数据
DBCLICK_KLINE:8, //双击K线图
RECV_START_AUTOUPDATE:9, //开始自动更新
RECV_STOP_AUTOUPDATE:10, //停止自动更新
ON_CONTEXT_MENU:11, //右键菜单事件
ON_TITLE_DRAW:12, //标题信息绘制事件
ON_SELECT_RECT:13, //区间选择事件通知
RECV_MINUTE_DATA:14, //分时图数据到达
ON_CLICK_INDEXTITLE:15, //点击指标标题事件
RECV_KLINE_UPDATE_DATA:16, //K线日,分钟更新数据到达
ON_CLICK_DRAWPICTURE:17, //点击画图工具
ON_FINISH_DRAWPICTURE:18, //完成画图工具
ON_INDEXTITLE_DRAW:19, //指标标题重绘事件
ON_CUSTOM_VERTICAL_DRAW:20, //自定义X轴绘制事件
RECV_KLINE_MANUAL_UPDATE_DATA:21, //手动更新K线事件
ON_ENABLE_SPLASH_DRAW:22, //开启/关闭过场动画事件
ON_CLICK_CHART_PAINT:23, //点击图形
ON_DRAW_MINUTE_LAST_POINT:24, //分时图绘制回调事件, 返回最后一个点的坐标
ON_DRAW_DEPTH_TOOLTIP:25, //绘制深度图tooltip事件
ON_CLICK:26, //点击事件
ON_PHONE_TOUCH:27, //手势点击事件 包含 TouchStart 和 TouchEnd
ON_CLICKUP_CHART_PAINT:28, //点击图形鼠标抬起
ON_SPLIT_YCOORDINATE:29, //分割Y轴及格式化刻度文字
ON_DBCLICK:30,
ON_SPLIT_XCOORDINATE:31, //分割X轴及格式化刻度文字
ON_KEYDOWN_SELECT_RECT:32, //键盘空格区间选择完成事件
ON_DRAG_SELECT_RECT:33, //区间选择区域变动
ON_DRAG_SELECT_RECT_MOUSEUP:34, //区间选择区域变动鼠标松开
ON_DRAW_KLINE_LAST_POINT:35, //K线图绘制回调事件,返回最后一个点的坐标
ON_CLICK_CROSSCURSOR_RIGHT:36, //十字光标右边按钮
ON_PLAY_SOUND:37, //播放声音 { Name:, Data: }
ON_CALCULATE_INDEX_OX:38, //创建OX指标回调
}
回调函数
function(event, data, obj)
event 事件信息
data 数据
obj 控件实例
注意 监听事件必须在Setoption以后再调用，否则无效
VUE中JSCHART_EVENT_ID枚举使用需要加上空间名:
import HQChart from 'hqchart'
.........
console.log(HQChart.Chart.JSCHART_EVENT_ID);
通过SetOption() 初始化注册
版本8872以后，事件注册也可以通过SetOption注册。
EventCallback 注册事件数组，可以同时注册多个事件，回调函数格式同上一样
this.Option=
{
Type:'历史K线图', //创建图形类型
EventCallback:
[
{
event:事件ID
callback:回调函数
}，
。。。。
],
..........
设置颜色风格（全局）
全局设置 成员静态函数
JSChart.SetStyle=function(option)
具体设置可以看 HQChart使用教程4- 如何自定义K线图颜色风格 https://blog.youkuaiyun.com/jones2000/article/details/90286933
K线缩放比例配置
JSChart.GetKLineZoom=function() //K线缩放配置
返回柱子宽度和间距的值
默认：
var ZOOM_SEED= //0=柱子宽度 1=间距
[
[48,10], [44,10],
[40,9], [36,9],
[32,8], [28,8],
[24,7], [20,7],
[18,6], [16,6],
[14,5], [12,5],
[8,4], [6,4], [4,4],
[3,3],
[3,1], [2,1], [1,1], [1,0],
];
数据API域名修改（全局）
全局设置 成员静态函数
数据我们分API数据 和 json缓存文件数据（不通过api获取， 我们直接把数据切片以Json文件格式分发到CDN或OSS）
JSChart.SetDomain(domain,cacheDomain)
domain api数据域名
cacheDomain 缓存文件下载域名
获取当前指标的名字
Chart.GetIndexInfo();
返回所有窗口的指标 ID和名字
[
{
Name:指标名字,
ID:指标ID,
Args: [ {Name:参数名, Value:参数值}, …]
},
…
]
自定义单根K线颜色
添加一根自定K线颜色
Chart.JSChartContainer.AddCustomKLine(kline, option);
- kline 单个自定K线颜色 { Key:id, Data:颜色配置 }
Key 单个K线的ID， 规则 日期1000000， 如果有时间 日期1000000+时间
如：
2021-10-01=> 20211001100000
2021-10-01 9:40 => 20211001100000+940
Data K线配置颜色
{ Color:K线颜色 DrawType:K线类型（缺省为当前K线类型), BGColor:K线背景色（缺省无背景色）"}
{ Color:"rgb(30,144,255)", DrawType:3, BGColor:"rgba(144,238,144,0.7)"} //空心带背景色
- option 配置信息 { Draw:是否立即重绘(true/false) }
清空所有自定义K线颜色
Chart.JSChartContainer.ClearCustomKLine();
未回补缺口提示
Chart.ChangePriceGap(obj)
obj={ Enable:显示/隐藏, Count:缺口个数 }
停止自动更新
Chart.StopAutoUpdate();
销毁插件
Chart.ChartDestroy()
外部可以通过变量IsDestroy， 来判断插件是否已经销毁无效了
Chart.JSChartContainer.IsDestroy
获取所有K线数据
Chart.JSChartContainer.GetKData();
右键菜单执行函数
K线和分时图的一些属性设置大部分都放到右键菜单里面了， 这样方便演示， 如果需要外部设置这些属性，可以通过ExecuteMenuCommand手动执行。
//函数源码 cmdID=菜单命令ID, aryArgs=参数
this.ExecuteMenuCommand=function(cmdID, aryArgs)
{
if(this.JSChartContainer && typeof(this.JSChartContainer.ExecuteMenuCommand)=='function')
{
JSConsole.Chart.Log('[JSChart:ExecuteMenuCommand] ');
return this.JSChartContainer.ExecuteMenuCommand(cmdID, aryArgs);
}
}
.........
//菜单命令ID 具体参数 看函数JSChartContainer.ExecuteMenuCommand
var JSCHART_MENU_ID=
{
CMD_CHANGE_PERIOD_ID:1, //切换周期
CMD_CHANGE_WINDOW_COUNT_ID:2, //窗口个数
CMD_CHANGE_RIGHT_ID:3, //复权
CMD_CHANGE_INDEX_ID:4, //切换指标
CMD_CHANGE_COLOR_INDEX_ID:5, //五彩K线指标
CMD_CHANGE_TRADE_INDEX_ID:6, //专家系统(交易指标)
CMD_DELETE_COLOR_INDEX_ID:7, //删除五彩K线指标
CMD_DELETE_TRADE_INDEX_ID:8, //删除专家系统(交易指标)
CMD_CHANGE_KLINE_TYPE_ID:9, //切换K线类型
CMD_CHANGE_PRICE_GAP_ID:10, //缺口提示
CMD_OVERLAY_SYMBOL_ID:11, //叠加品种
CMD_DELETE_ALL_OVERLAY_SYMBOL_ID:12, //删除所有叠加品种
CMD_CHANGE_COORDINATETYPE_ID:13, //切换坐标类型
CMD_CHANGE_KLINE_INFO_ID:14, //切换信息地雷
CMD_DELETE_ALL_KLINE_INFO_ID:15, //清空信息地雷
CMD_CHANGE_DRAG_MODE_ID:16, //切换拖动模式
CMD_CHANGE_BG_SPLIT_ID:17, //背景分割
CMD_SHOW_DRAWTOOL_ID:18, //画图工具
CMD_HIDE_DRAWTOOL_ID:19,
CMD_SHOW_STOCKCHIP_ID:20, //筹码分布
CMD_HIDE_STOCKCHIP_ID:21,
CMD_XXXXXX_NONE_ID:22, //未用!!!!
CMD_CHANGE_DAY_COUNT_ID:23, //切换天数
CMD_SHOW_CALLCATION_ID:24, //显示|隐藏集合竞价 { Left:, Right: } //单日
CMD_SELECTED_ZOOM_ID:25, //选中放大
CMD_SELECTED_SUMMARY_ID:26, //区间统计
CMD_SHOW_INDEX_ID:27, //显示隐藏指标
CMD_SHOW_OVERLAY_INDEX_ID:28, //显示隐藏叠加指标
CMD_DELETE_OVERLAY_INDEX_ID:29, //删除叠加指标
CMD_SHOW_OVERLAY_Y_AXIS_ID:30, //显示隐藏Y轴叠加指标
CMD_ENABLE_OVERLAY_SHARE_Y_ID:31, //和主图指标共享Y轴坐标
CMD_CHANGE_DEFAULTCURSOR_ID:32, //修改鼠标形状
CMD_CHANGE_API_INDEX_ID:33, //切换后台接口指标
CMD_CHANGE_SCRIPT_INDEX_ID:34, //切换成自定义的脚本指标
CMD_CHANGE_BASELINE_ID:35, //分时图切换基准线
CMD_ADD_OVERLAY_INDEX_ID:36, //添加叠加指标
CMD_CHANGE_LANGUAGE_ID:37, //语言切换
CMD_CHANGE_DRAG_RECT_SHOW_MODE_ID:38,
CMD_SHOW_CORSS_LINE_ID:39, //显示十字光标线
CMD_ENABLE_POP_MINUTE_CHART_ID:40, //双击弹分时图
CMD_CHANGE_INFO_POSITION_ID:41, //修改信息地雷位置
CMD_CHIP_CHART_SETTING_ID:42, //筹码图设置
CMD_DIALOG_TOOLTIP_ATTRIBUTE:43, //修改K线信息框属性 Ary:[{ Enable:, Style:}, ]
CMD_KLINE_TOOLTIP_ATTRIBUTE:44, //修改K线提示框属性 Ary:[{ Enable:true/false, EnableKeyDown:true/false}]
CMD_MODIFY_INDEX_PARAM:45, //指标删除修改 [windowIndex, ]
CMD_MODIFY_OVERLAY_INDEX_PARAM:46, //叠加指标修改 [windowIndex, ID ]
CMD_LOCK_CROSSCURSOR:47, //锁十字光标
CMD_UNLOCK_CROSSCURSOR:48, //解锁十字光标
CMD_CORSS_ON_CLOSE_LINE_ID:49, //十字光标在价格线上(分时图)
CMD_CORSS_ON_VAILD_TIME_ID:50, //超出当前时间的,X轴调整到当前最后的时间(分时图)
CMD_CORSS_ON_KLINE_ID:51, //十字光标只能画在K线上
CMD_CORSS_POINT_ID:52, //十字光标圆点
CMD_RBUTTON_SELECT_RECT_ID:53, //右键区间选择
CMD_LBUTTON_SELECT_RECT_ID:54, //左键区间选择
CMD_ENABLE_XDRAG_BOTTOM_ID:55, //X轴拖动缩放
CMD_FULLSCREEN_SUMMARY_ID:56, //当前屏区间统计
CMD_CORSS_DBCLICK_ID:57, //双击显示隐藏十字光标
CMD_ENABLE_KLINE_DAY_SUMMARY_ID:58, //K线底部显示走完剩余时间
CMD_SHOW_BUYSELL_BAR_ID:59, //盘口分析(右侧显示买卖盘柱子) 分时图
CMD_CORSS_SHOW_INCREASE_ID:60, //十字光标 底部显示"至今涨幅"
CMD_CORSS_X_TEXTALIGN_ID:61, //十字光标 底部文字对齐方式
CMD_REPORT_CHANGE_BLOCK_ID:100, //报价列表 切换板块ID
CMD_REPORT_COLUMN_SORT_ID:101, //报价列表 表头排序 Arg[列序号, 排序方向]
CMD_REPORT_COLUMN_DEL_ID:102, //报价列表 删除列
CMD_REPORT_COLUMN_MOVE_ID:103, //报价列表 列移动
CMD_REPORT_COLUMN_FILTER_ID:104, //报价列表 筛选
CMD_REPORT_CHANGE_COLUMN_ID:105, //报价列表 切换列 Arg[Column, ]
}
扫一扫
836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
