HQChart使用教程1- 如何快速创建一个K线图页面

5,599 阅读8分钟

在这里插入图片描述

HQChart介绍

系统简介

HQChart是国内第1个基于传统PC股票客户端软件(C++)移植到js/py平台的一个项目, 包含K线图图形库及麦语法(分析家语法)指标执行器.

平台支持

js, vue, uniapp, 小程序

源码地址

源码地址:github.com/jones2000/H…
镜像地址:gitee.com/jones2000/H…

uniapp 版本:ext.dcloud.net.cn/plugin?id=4…

第3放数据对接案例github.com/jones2000/H…

Option的配置项说明

上面的代码可以看到,所有K线图的设置都是通过==Option==来配置的。

Type

图形类型, 这里填==历史K线图==代表创建一个K线图 其他图形类型用下面的字符串 "历史K线图" "历史K线图横屏" "分钟走势图" "分钟走势图横屏"

Symbol

显示的股票代码 股票代码需要带后缀. 上海.sh 深证.sz

IsAutoUpdate

是否自动更新最新行情,如果是true, 会定时(30s/次)获取行情数据,更新K线图及指标

IsShowRightMenu

是否显示右键菜单, 如果是手机页面可以设置成false 右键菜单

IsShowCorssCursorInfo

鼠标移动或手势的时候是否显示十字光标 十字光标

IsApiPeriod

周期和复权数据是否全部使用api获取, 默认周期和复权是本地计算的 (false=周期数据是前端合并, true=周期和复权数据都使用后台api数据)

周期说明

1分钟K线和日K为原始数据, 其他周期数据都是可以通过原始数据合并得到。 合并周期可以在前端完成也可以在后台完成。hqchart对这2种模式都是支持的。

  1. 前端合并周期数据模式, 设置IsApiPeriod=false, 这样周期数据都是通过1分钟K线或日K数据由hqchart前端内置合并完成。切换周期除了1分钟K线和日K会触发数据请求, 其他周期切换不会触发数据请求。
  2. 后台合并数据模式. 设置IsApiPeriod=true, 前端不做合并操作, 直接使用后台的数据,每次切换周期都会请求后台周期数据。

KLine

KLine.DragMode

拖拽模式 0=禁止拖拽(禁止鼠标或手势左右拖动数据) 1=数据拖拽(可以用鼠标或手势左右拖动数据) 2=区间选择(拖动可以选择一段时间数据做==区间统计==,和==形态匹配== 3=长按十字光标显示保留/点击十字光标消失 (h5有效) 在这里插入图片描述 在这里插入图片描述

KLine.Right

复权 0=不复权 1=前复权 2=后复权 ** 不是股票的品种 设置成0 !!!!!!!!**

KLine.Period:

周期 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 自定义秒

KLine.ZoomType

1=以十字光标为中心缩放, 如果左或右边数据不过,适当调整中心的位置

KLine.MaxReqeustDataCount

请求K线数据的最大个数

KLine.PageSize

初始一屏显示几个K线,通过鼠标滚轴上下,键盘上下,手势两个手指上下可以调整一屏显示K线的个数

KLine.DataWidth

初始一屏显示的K线宽度。K线个数有K线宽度内部计算得到。 注意: PageSize / DataWidth 只能设置一模式

KLine.Info

信息地雷 目前支持“互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告", 可以选择其中的几个填上 在这里插入图片描述

KLine.InfoPosition

信息地雷图标显示的位置。 0=K线上面(默认) 1=底部。 底部的效果图 在这里插入图片描述

KLine.IsShowTooltip

是否显示K线的tooltip信息, 鼠标移动到K线上 或 键盘左右移动十字光标都会出现tooltip. 在这里插入图片描述

KLine.DrawType

K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4= 收盘价面积图

KLine.IsShowMaxMinPrice

K线上是否显示最大最小值 (版本>=7717)

KLine.RightSpaceCount

最后数据和右边框空白间距,空白的宽度=RightSpaceCount*k线宽度 (ver>=7756) 在这里插入图片描述

KLine.KLineDoubleClick

是否启动双击K线弹出内置分时对话框. 默认是开启

KLine.RightFormula

内置复权算法类型, 0=简单复权, 1=使用复权系数(复权因子)计算复权。缺省为0 ** 只有在IsApiPeriod=false的时候才会使用前端计算复权, 否在都是后台计算复权**

KLineTitle

KLineTitle.IsShowName

K线标题是否显示股票名称

KLineTitle.IsShowSettingInfo

K线标题是否周期/复权 在这里插入图片描述

Border

Border.Left, Border.Right,Border.Bottom,Border.Top 坐标边框到画布边框的间距 当Top<5时 顶部的标题就不会显示 当Bottom<5 底部不显示X轴日期刻度文字 在这里插入图片描述

AutoLeft, AutoRight

10226版本以后才支持 根据刻度文字自适应左边或右边边框间距 {Blank: 留白宽度, MinWidth:最小宽度 } 这个设置必须是Left>10 或者Right>10才有效, 只支持刻度在边框外部显示的模式

Border: //边框
{
     Left:30,         //左边间距
     Right:30,       //右边间距
     Bottom:25,      //底部间距
     Top:25,         //顶部间距

     AutoLeft:{ Blank:10, MinWidth:30 },
     AutoRight:{ Blank:10, MinWidth:30 },
 },

Windows

指标窗口,数组可以配置多个指标窗口, 每个窗口单独设置

Index

系统指标名字

Modify

是否显示修改指标参数按钮

Change

是否可以切换股票

Close

是否显示关闭指标窗口按钮 在这里插入图片描述 更多指标窗口配置详见 HQChart使用教程49-指标配置项说明

OverlayIndexType

叠加指标设置 { Position:指标标题输出位置 0=跟在主图指标标题后面,显示在同一个行 1=每个叠加指标单独一行指标标题 LineSpace:3 每一行指标标题行间距,只在Position=1有效 }

this.Option= 
{
    Type:'历史K线图',   //创建图形类型
   
    
    Windows: //窗口指标
    [
       
        {
            Index:"MA", Overlay:true, OverlayIndexType:{ Position:1, LineSpace:3 },
        },
        
        {
           Index:"MACD", Modify:true, Change:true, Close:true,Overlay:true, StringFormat:2, OverlayIndexType:{ Position:1, LineSpace:3 }
        },
       
        {
        	Index:"VOL", Modify:true,Change:false,Overlay:true, Close:true 
        }, 
    ], 

    
    OverlayIndex:
    [
       
        {Index:'BOLL', Windows:0 , IsShareY:true,ShowRightText:true },
        {Index:'RSI', Windows:0, ShowRightText:true },
        {Index:'MACD', Windows:0, ShowRightText:true },
        {Windows:1, IndexName:"指标ID", Name:"自定义指标", Script:"T:MA(O,20),LINETHICK2;", Identify:"guid_66990",ShowRightText:false }
    ],  //叠加指标

效果图 在这里插入图片描述

Frame

指标窗口坐标设置

SplitCount

y轴刻度个数

IsShowLeftText

是否显示左侧Y轴刻度 左侧刻度如果间距不够会显示在框架内部, 必须设置这个值才能去掉左侧Y轴刻度显示

IsShowRightText

是否显示右侧Y轴刻度

Height

窗口高度比值

Custom

自定义刻度 详见HQChart使用教程50-Y轴自定义刻度设置说明

SplitType

Y轴刻度风格方式 0=自动分割(会自动调整最大最小), 1=根据当前屏最大最小值平均分割

EnableRemoveZero

所有Y轴显示刻度如果小数位后面是0, 就抹去0。 默认是开启的 如刻度 [10.00, 15.00, 20.00] 抹零以后显示为[10, 15, 20]

MinYDistance

Y轴刻度文字与刻度文字的最小间距, 小于这个间距隐藏后面的刻度文字

BorderLine

边框线显示控制 (1=上 2=下 4=左 8=右) 如果要下和右边框 BorderLine=2|8

IsShowYLine,IsShowXLine

IsShowYLine=是否显示Y轴刻度线 , IsShowXLine=是否显示X轴刻度线

TopSpace,BottomSpace

顶部留白和底部留白, K线图默认上下都留白的。 在这里插入图片描述

IsShowIndexTitle

是否显示指标标题信息, 默认是true 在这里插入图片描述

StepPixel

移动一个K线需要的手势移动的像素(默认4) 10176版本以后增加自动模式 0 自动模式, 手势移动的距离>=1根K线的宽度+间距才会移动一根K线

ZoomStepPixel

缩放一次,2个手指需要移动的间距像素(默认5)

SplashTitle

数据下载提示信息 默认是"数据加载中" 在这里插入图片描述

EnableZoomUpDown

是否允许K线缩放 默认全部开启

 EnableZoomUpDown: 
 {
       Wheel: 鼠标滚轴是否允许缩放 true/false
       Keyboard:键盘上下是否允许缩放 true/false
       Touch:手机手势是否允许缩放 true/false
 }

EnableYDrag

Y轴上下拖拽缩放, 左右单独设置的

EnableYDrag:
{
    Right:true,  //右边Y轴是否可以拖拽
    Left:true,   //左边Y轴是否可以拖拽
},

OnCreatedCallback

在实例创建完成以后会回调这个函数, 这个回调会在请求数据前触发 . 如果要把hqchart内置的一些函数替换成自己的,可以在这个里面做. 10079版本以后才支持 function (chart) //chart是内部hqchart实例

this.Option.OnCreatedCallback=(chart) => { this.OnCreatedHQChart(chart); }
........................
this.Chart.SetOption(this.Option);  //设置K线配置

Listener

监听鼠标键盘事件

KeyDown

是否监听键盘事件 true/false, 默认true

Wheel

是否监听鼠标滚轴事件 true/false , 默认true

EnableZoomIndexWindow

双击缩放附图指标窗口大小 true/false 默认false 版本10277 以后才支持 在这里插入图片描述

css样式配置

position:relative

K线的div必须设置这个, 否在在K线上使用的dom显示位置会不对。

交流QQ群

基本的K线设置就介绍到这里, 如果还又问题可以加交流QQ群: 950092318

个人爱好(模型/摄影)

DSC_2660.JPG

DSC_2663.JPG

DSC_2664.JPG