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

jones2000
1,854 阅读6分钟

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

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

周期切换

Chart.ChangePeriod(周期值整型)

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

切换股票

Chart.ChangeSymbol(symbol)

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

切换指标

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

增加一个窗口指标

=10091版本

Chart.AddIndexWindow(indexName, option);

indexName 指标名称

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 //叠加指标按钮 }, IsShowLeftText: IsShowRightText: TitleHeight: IsShowTitleArraw: IsShowIndexName: IsShowOverlayIndexName: IndexParamSpace: IsShowXLine: IsShowYLine: IsShowIndexTitle: }

删除指标窗口

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)

symbol 需要叠加的股票代码字符串 h5支持多个股票叠加， app/小程序只支持叠加一个股票

删除所有叠加股票

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:一屏显示的数据个数(可选) }

注册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           //开启/关闭过场动画事件
}

回调函数 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线图颜色风格 blog.csdn.net/jones2000/a…

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)"}               //空心带背景色
  1. option 配置信息 { Draw:是否立即重绘(true/false) }

清空所有自定义K线颜色

Chart.JSChartContainer.ClearCustomKLine();

交流QQ群

如果还有问题可以加交流QQ群: 950092318

HQChart代码地址

地址：github.com/jones2000/H…

个人爱好摄影/模型

DSC_2700.JPG

DSC_2704.JPG

DSC_2705.JPG

avatar
文章
阅读
粉丝