HQChart使用教程5- 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: //一屏显示的数据个数 （缺省使用当前屏数据个数)
}

//调用示例

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轴预留高度
		}
 } 

增加一个窗口指标

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, //标题栏模式按钮
		},
		IsShowLeftText:
		IsShowRightText:
		TitleHeight:
		IsShowTitleArraw:
		IsShowIndexName:
		IsShowOverlayIndexName:
		IndexParamSpace:
		IsShowXLine:
		IsShowYLine:
		IsShowIndexTitle:
 } 

增加一个自定义通达信脚本指标窗口

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=交易指示 }

信息地雷

目前支持 “互动易”,“大宗交易”,‘龙虎榜’,“调研”,“业绩预告”,“公告”

1. 增加一个信息地雷

    Chart.AddKLineInfo(infoName, bUpdate)
   

   infoName 信息地雷名字 ( “互动易”,“大宗交易”,‘龙虎榜’,“调研”,“业绩预告”,“公告”)
   bUpdate 是否立即更新
2. 删除一个信息地雷

    Chart.DeleteKLineInfo(infoName)
   

   infoName 删除信息地雷的名字
3. 删除所有信息地雷

   Chart.ClearKLineInfo()
   

移动当前屏K线数据到具体的某一天

Chart.SetFirstShowDate(obj)

obj { Date:起始日期(必填), PageSize:一屏显示的数据个数(可选), Time:日期时间(可选) }

注册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.csdn.net/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);

1. 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)"}               //空心带背景色

2. option 配置信息 { Draw:是否立即重绘(true/false) }

清空所有自定义K线颜色

Chart.JSChartContainer.ClearCustomKLine();

未回补缺口提示

Chart.ChangePriceGap(obj)

obj={ Enable:显示/隐藏, Count:缺口个数 }

停止自动更新

Chart.StopAutoUpdate();

销毁插件

Chart.ChartDestroy()

外部可以通过变量IsDestroy， 来判断插件是否已经销毁无效了

Chart.JSChartContainer.IsDestroy

HQChart代码地址

地址：https://github.com/jones2000/HQChart