HQChart使用教程5- K线图控件操作函数说明_csdn hqchart

注：所有这些操作(除了全局函数)必须在图形创建完成并且调用SetOption()以后.

var Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上
Chart.SetOption(this.Option);
//初始设置了以后就可以调用操作函数来控制K线图
1
2
3

周期切换

Chart.ChangePeriod(周期值整型) 
1

//周期值 0=日线 1=周线 2=月线 3=年线 4=1分钟 5=5分钟 6=15分钟 7=30分钟 8=60分钟

切换股票

Chart.ChangeSymbol(symbol)
1

symbol 字符串股票代码 ， 代码.市场后缀 上海=sh 深证=sz

切换指标

Chart.ChangeIndex(windowIndex,indexName,option)
1

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 //叠加指标按钮
}
}

增加一个窗口指标

AddIndexWindow

Chart.AddIndexWindow(indexName, option);
1

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:
 } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

AddScriptIndexWindow

Chart.AddScriptIndexWindow(indexInfo, option);
1

indexInfo

自定义指标内容
{ Name:指标名字 , Script:指标脚本, Args:参数, }

option

可选设置（参见AddIndexWindow中的option)

增加一个远程指标窗口

AddAPIIndexWindow

Chart.AddAPIIndexWindow(indexData, option);
1

indexData

远程指标信息
{ API:{ Name:指标名字, Script:指标脚本可以为空, Args:参数可以为空, Url:指标执行地址 } }

option

可选设置（参见AddIndexWindow中的option)

删除指标窗口

Chart.RemoveIndexWindow(id)
1

id 窗口索引id, 从0开始
注意 K线图第1个窗口是无法删除的, 分时图前2个窗口时无法删除的

切换自定义指标

Chart.ChangeScriptIndex(windowIndex,indexData)
1

windowIndex 窗口索引 从0开始
indexData 自定义指标 {Name：指标名字, Script：指标脚本, Args：指标参数（数组) }

切换复权

Chart.ChangeRight(right)
1

right 复权 0=不复权 1=前复权 2=后复权

叠加股票/取消叠加股票

叠加股票

Chart.OverlaySymbol(symbol, option)
1

symbol 需要叠加的股票代码字符串 h5支持多个股票叠加， app/小程序只支持叠加一个股票
K线叠加option配置
option={ YInfoType: 0=在Y轴不显示得叠加信息， 4=在Y轴显示叠加信息 , DrawType:叠加K线类型， Color:K线颜色 }
分时图option配置
optiion={ Color:线段颜色， OverlayType=0; //叠加方式 0=百分比叠加 1=绝对叠加 }

删除所有叠加股票

Chart.ClearOverlaySymbol()  \\取消叠加股票
1

删除一个叠加股票

Chart.DeleteOverlaySymbol(symbol); //删除一个叠加股票
1

K线切换类型

Chart.ChangeKLineDrawType(drawType)
1

drawType K线切换类型 0=实心K线 1=收盘价线 2=美国线 3=空心K线

K线坐标切换

接口没有做， 直接去内部函数吧

Chart.JSChartContainer.ChangeCoordinateType(obj)
1

obj=
{
Type:0=普通坐标 1=百分比坐标 (右边坐标刻度) 2=对数对标 3=等比坐标
IsReverse: 是否反转坐标
}

设置指标窗口个数

Chart.ChangeIndexWindowCount (count)
1

count 窗口个数， 最多8个

五彩K线|交易指示 指标

这些指标都显示在主图窗口里

Chart.ChangeInstructionIndex(indexName) 
1

indexName 五彩K线或交易指示 ID

取消五彩K线|交易指示 指标

 Chart.CancelInstructionIndex()
1

自定义五彩K线|交易指示 指标

Chart.ChangeInstructionScriptIndex=function(indexData)
1

indexData 自定义指标 {Name：指标名字, Script：指标脚本, Args：指标参数（数组)， InstructionType： 指标类型 2=五彩K线 1=交易指示 }

信息地雷

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

1. 增加一个信息地雷

    Chart.AddKLineInfo(infoName, bUpdate)
   1

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

    Chart.DeleteKLineInfo(infoName)
   1

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

   Chart.ClearKLineInfo()
   1

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

Chart.SetFirstShowDate(obj)
1

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

注册K线图事件监听事件

动态注册

Chart.AddEventCallback(obj)
1

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指标回调
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

回调函数
function(event, data, obj)
event 事件信息
data 数据
obj 控件实例
注意 监听事件必须在Setoption以后再调用，否则无效

VUE中JSCHART_EVENT_ID枚举使用需要加上空间名:

import HQChart from 'hqchart'
.........

console.log(HQChart.Chart.JSCHART_EVENT_ID);

1
2
3
4
5

通过SetOption() 初始化注册

版本8872以后，事件注册也可以通过SetOption注册。
EventCallback 注册事件数组，可以同时注册多个事件，回调函数格式同上一样

 this.Option= 
 {
     Type:'历史K线图',   //创建图形类型
     EventCallback:
     [
         {
             event:事件ID
             callback:回调函数 
         }，
         。。。。
     ],
     ..........
1
2
3
4
5
6
7
8
9
10
11
12

设置颜色风格（全局）

全局设置 成员静态函数

JSChart.SetStyle=function(option)
1

具体设置可以看 HQChart使用教程4- 如何自定义K线图颜色风格 https://blog.csdn.net/jones2000/article/details/90286933

K线缩放比例配置

JSChart.GetKLineZoom=function() //K线缩放配置
1

返回柱子宽度和间距的值
默认：

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],
];
1
2
3
4
5
6
7
8
9
10
11
12
13

数据API域名修改（全局）

全局设置 成员静态函数
数据我们分API数据 和 json缓存文件数据（不通过api获取， 我们直接把数据切片以Json文件格式分发到CDN或OSS）

JSChart.SetDomain(domain,cacheDomain)
1

domain api数据域名
cacheDomain 缓存文件下载域名

获取当前指标的名字

Chart.GetIndexInfo();
1

返回所有窗口的指标 ID和名字
[
{
Name:指标名字,
ID:指标ID,
Args: [ {Name:参数名, Value:参数值}, …]
},
…
]

自定义单根K线颜色

添加一根自定K线颜色

Chart.JSChartContainer.AddCustomKLine(kline, option);
1

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

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

清空所有自定义K线颜色

Chart.JSChartContainer.ClearCustomKLine();
1

未回补缺口提示

Chart.ChangePriceGap(obj)
1

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

停止自动更新

Chart.StopAutoUpdate();
1

销毁插件

Chart.ChartDestroy()
1

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

Chart.JSChartContainer.IsDestroy
1

HQChart代码地址

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