Skip to content

3. HQChart图形操作接口

Jump to bottom
jones edited this page Oct 26, 2021 · 4 revisions

说明

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

K线周期切换

this.chart.ChangePeriod(周期值整型)

周期 0=日线 1=周线 2=月线 3=年线 4=1分钟 5=5分钟 6=15分钟 7=30分钟 8=60分钟 9=季线 10=分笔线 11=120分钟 12=240分钟 20001-30000 自定义分钟 40001-50000 自定义天数 30001-32000 自定义秒

切换股票

this.chart.ChangeSymbol(symbol)

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

指标操作

切换指标

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

增加一个窗口指标

this.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: }

删除指标窗口

this.chart.RemoveIndexWindow(id)

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

切换自定义指标

this.chart.ChangeScriptIndex(windowIndex,indexData)

windowIndex 窗口索引 从0开始. 分时图只能从索引2开始， 前面2个图是固定无法修改 indexData 自定义指标 {Name：指标名字, Script：指标脚本, Args：指标参数（数组) }

K线坐标切换

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

this.chart.JSChartContainer.ChangeCoordinateType(obj)

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

设置指标窗口个数

this.chart.ChangeIndexWindowCount (count)

count 窗口个数， 最多8个

获取当前指标的名字

this.chart.GetIndexInfo();

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

五彩K线|交易指示 指标

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

this.chart.ChangeInstructionIndex(indexName)

indexName 五彩K线或交易指示 ID

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

 this.chart.CancelInstructionIndex()

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

this.chart.ChangeInstructionScriptIndex=function(indexData)

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

信息地雷

目前支持 "互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"

例子1. 增加一个信息地雷

 ```javascript 
  this.chart.AddKLineInfo(infoName, bUpdate)
  ```
  **infoName** 信息地雷名字  ( "互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告")
  **bUpdate** 是否立即更新

例子2. 删除一个信息地雷

 ```javascript 
  this.chart.DeleteKLineInfo(infoName)
  ```
  **infoName** 删除信息地雷的名字

例子3. 删除所有信息地雷

 ```javascript 
 this.chart.ClearKLineInfo()
  ```

K线切换复权

this.chart.ChangeRight(right)

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

品种叠加

叠加股票

this.chart.OverlaySymbol(symbol)

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

删除所有叠加股票

this.chart.ClearOverlaySymbol()  \\取消叠加股票

删除一个叠加股票

this.chart.DeleteOverlaySymbol(symbol); //删除一个叠加股票

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

this.chart.SetFirstShowDate(obj)

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

注册监听事件

this.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         //十字光标右边按钮
}

回调函数 function(event, data, obj) event 事件信息 data 数据 obj 控件实例

动态切换多日图

this.Chart.ChangeDayCount(dayCount);

dayCount 天数，数值型， 范围1-10

导出图片函数说明

this.chart.SaveToImage(format,colorGB)

format: 导出图片的格式: image/jpeg , image/png ，如果format为null 默认使用 image/png colorGB: 背景颜色，如果colorGB为空,使用白色背景 返回图片base64数据

例子

var imageData=chart.SaveToImage();
 var image = document.createElement('img');
 image.src=imageData;
 document.body.appendChild(image);

  var download=document.createElement('a');
  var imageDownloadData = imageData.replace("image/png", "image/octet-stream"); //本地下载
  download.href=imageDownloadData
  download.innerText='下载'
  document.body.appendChild(download);

全局函数

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],
];

设置颜色风格

全局设置 成员静态函数

JSChart.SetStyle=function(option)

数据API域名修改（全局）

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

JSChart.SetDomain(domain,cacheDomain)

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

Clone this wiki locally