HQChart k线图配置
Option的配置项说明
- Type 图形类型
- Symbol (股票代码)
- IsApiPeriod(是否使用api获取数据)
- IsAutoUpdate(是否自动更新最新行情)
- EnablePopMenuV2(是否启用右键菜单)
- IsShowRightMenu(是否启用右键菜单)
- IsShowCorssCursorInfo(是否显示十字光标)
- 启用API动态周期
- 使用本地周期(默认)
- API数据格式要求
- KLine
- KLine.DragMode(拖拽模式)
- KLine.Right(复权)
- KLine.Period(设置周期)
- KLine.ZoomType(设置缩放)
- KLine.MaxRequestDataCount(请求日K数据最大个数)
- KLine.PageSize(初始设置显示k线数)
- KLine.DataWidth(初始设置k线宽度)
- KLine.Info(信息地雷)
- KLine.InfoPosition(信息地雷显示位置)
- KLine.IsShowTooltip(是否使用内置tooltip)
- KLine.DrawType(k线类型)
- KLine.IsShowMaxMinPrice(右边框空白距离)
- KLine.RightFormula(内置复权算法类型)
- KLine.PriceGap(显示未回补缺口)
- PriceGap.Enable
- PriceGap.Count
- KLine.UnchangeBarType( 十字星K线颜色)
- KLineTitle(设置k线标题)
- KLineTitle.IsShowName(是否显示股票名称)
- KLineTitle.IsShowSettingInfo(是否周期/复权)
- KLineTitle.TextSpace(文字间距)
- KLineTitle.DateTimeSpace(日期后间距)
- KLineTitle.PeriodSpace(周期后间距)
- KLineTitle.NameSpace(名称后间距)
- KLineTitle.IsTitleShowLatestData(是否显示最后一个数据)
- KLineTitle.ShowPostion(标题栏文字位置设置)
- Border(坐标边框)
- Border.Left(左距离)
- Border.Right(右距离)
- Border.Top (上距离)
- Border.Bottom(下距离)
- Border.AutoLeft 和Border.AutoRight(文字左右边的间距)
- Windows(指标窗口)
- Index(窗口名称)
- Modify(是否显示修改指标按钮)
- Change(是否显示切换指标)
- Close(是否显示关闭指标)
- Overlay(是否显示叠加指标)
- TitleHeight (标题高度)
- StringFormat(标题格式)
- FloatPrecision(默认显示两位小数)
- TitleFont(标题字体设置)
- IsShortTitle (是否隐藏指标参数)
- YAxis(副图生效)
- IsSync(同步/异步指标)
- IsShowIndexTitle(是否隐藏指标标题)
- 动态执行脚本
- API 远程指标 配置
- IsShowIndexName (显示指标名称)
- IsShowTitleArrow(是否显示指标数据后箭头)
- ArrowType(标信息上涨下跌箭头类型)
- IndexParamSpace (标题数值间距)
- IsShowOverlayIndexName(是否显示叠加名称)
- MaxMin(是否显示 窗口最大,最小化 )
- TitleWindow(是否显示“折叠窗口")
- AddIndexWindow(增加指标窗口)
- Export(是否显示”导出数据")
- OverlayIndexType(叠加指标设置 )
- OverlayIndexType.Position(标题输出位置)
- OverlayIndexType.LineSpace(标题行间距)
Type 图形类型
Type <string>
可选:
历史K线图
历史K线图横屏
分钟走势图
分钟走势图横屏
Symbol (股票代码)
<sting>
显示的股票代码 股票代码需要带后缀. 上海.sh 深证.sz 它和option
600000.sh
IsApiPeriod(是否使用api获取数据)
<boolean>
- true:K线周期(如日线、周线、分钟线等)从后端API获取(需配合 ApiPeriod 参数)。
- false(默认值):使用本地预设的周期列表(内置常见周期)。
IsAutoUpdate(是否自动更新最新行情)
<boolean>
是否自动更新最新行情,如果是true, 会定时(30s/次)获取行情数据,更新K线图及指标
- true(默认值):图表会自动定时请求最新数据并刷新(适用于实时行情)。
- false:图表只加载初始数据,不自动更新(适用于静态历史K线分析)。
EnablePopMenuV2(是否启用右键菜单)
<boolean>
- true:启用 新版右键菜单(功能更丰富,支持自定义菜单项)。
- false(默认值):使用旧版右键菜单(基础功能)。
var option = {Type: '历史K线',Symbol: '600000.SH',EnablePopMenuV2: true, // 启用新版菜单KLine: {CandleWidth: 8,}
};let byId= document.getElementById('chart-container')
let chart =new HQChart.Chart.JSChart.Init(byId);
chart.SetOption(this.Minute.Option);
IsShowRightMenu(是否启用右键菜单)
<boolean>
单独使用它,我这边点击右键没有效果,需要和EnablePopMenuV2配套使用(这个可能要看自己安装的版本) 。若 IsShowRightMenu: false,无论 EnablePopMenuV2 如何设置,均不会显示任何菜单。
- true(默认值):启用右键菜单(用户右键点击图表时会弹出功能菜单)。
- false:禁用右键菜单(用户无法通过右键操作图表)。
IsShowCorssCursorInfo(是否显示十字光标)
<boolean>
鼠标移动或手势的时候是否显示十字光标
- true(默认值):启用十字光标信息框(鼠标悬停时显示K线时间、价格等数据)。
- false:禁用十字光标信息框(隐藏悬停时的数据提示)。
启用API动态周期
var option = {Type: '历史K线',Symbol: 'BTC/USDT',IsApiPeriod: true, // 启用API动态周期ApiPeriod: {Url: '/api/list', // 后端API地址Method: 'POST', // 请求方法Data: { symbol: 'BTC/USDT' }, // 附加参数Callback: (data) => { // 数据处理回调return data.periods; // 返回格式示例: [{Name:'1分钟', Value:'1m'}, ...]},ErrorCallback: (error) => { console.error('周期加载失败:', error); }},OnPeriodChange: (period) => { // 周期切换事件console.log('当前周期:', period.Value);}
};
使用本地周期(默认)
var option = {Type: '历史K线',Symbol: 'BTC/USDT',IsApiPeriod: false, // 启用API动态周期}
API数据格式要求
后端返回的周期列表需为 数组,每个周期对象包含:
- Name: 显示名称(如"日线")
- Value: 周期值(如"day")
- 可选 Default: 是否默认选中(true/false)
{"periods": [{ "Name": "1分钟", "Value": "1m", "Default": false },{ "Name": "日线", "Value": "day", "Default": true }]
}
KLine
KLine.DragMode(拖拽模式)
<Number>
拖拽模式
可选值 | 说明 |
---|---|
0 | (默认值) 禁止拖拽(禁止鼠标或手势左右拖动数据) |
1 | 数据拖拽(可以用鼠标或手势左右拖动数据) |
2 | 区间选择(拖动可以选择一段时间数据做区间统计,和形态匹配) |
3 | 长按十字光标显示保留/点击十字光标消失 (h5有效) |
KLine.Right(复权)
<Number>
复权
可选值 | 说明 |
---|---|
0 | (默认值) 不复权(显示原始价格) |
1 | 前复权(以当前股价为基准,调整历史价格) |
2 | 后复权(以历史价格为基准,调整当前股价) |
KLine.Period(设置周期)
<Number>
设置周期
可选值 | 说明 |
---|---|
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(设置缩放)
<Number>
设置缩放
可选:
1
以十字光标为中心缩放, 如果左或右边数据不过,适当调整中心的位置
KLine.MaxRequestDataCount(请求日K数据最大个数)
<Number>
请求日K线数据的最大个数 (目前我这个用了,没生效,但是文档有这个属性。如果有小伙伴用了有效果麻烦分享一下)
KLine.PageSize(初始设置显示k线数)
<Number>
初始一屏显示几个K线,可以通过鼠标滚轴上下,键盘上下,手势两个手指上下可以调整一屏显示K线的个数
KLine.DataWidth(初始设置k线宽度)
<Number>
初始一屏显示k线宽度。k线个数由K线内部计算得到,这里需要注意一下,PageSize和DataWidth只能设置其中一个模式
KLine.Info(信息地雷)
<Array>
(这个属性我目前也没能实现效果,如果有小伙伴用了有效果分享一下呗)
信息地雷 目前支持“互动易",“大宗交易”,‘龙虎榜’,“调研”,“业绩预告”,“公告”, 可以选择其中的几个填上
KLine.InfoPosition(信息地雷显示位置)
<Number>
信息地雷图标显示的位置。
可选:
0
K线上面(默认)1
底部。
KLine.IsShowTooltip(是否使用内置tooltip)
<boolean>
是否使用创建内置的tooltip, 包含K线提示信息, 图标提示信息等等
KLine.DrawType(k线类型)
<Number>
K线类型
可选值 | 说明 |
---|---|
0 | (默认值) 实心K线柱子 |
1 | 收盘价线 |
2 | 美国线 |
3 | 空心K线柱子 |
4 | 收盘价面积图 |
5 | 订单流 |
6 | 完全空心K线柱子 |
7 | 订单流样式2 |
8 | 订单流样式3 |
9 | 自定义颜色K线 |
10 | renko |
11 | Heikin Ashi |
12 | line break |
13 | high low |
14 | 外部定制K线图 |
15 | HLC Area |
KLine.IsShowMaxMinPrice(右边框空白距离)
<Number>
最后数据和右边框空白间距
(默认值)空白的宽度=RightSpaceCount*k线宽度
KLine.RightFormula(内置复权算法类型)
<Number>
内置复权算法类型。注意: 只有在IsApiPeriod=false的时候才会使用前端计算复权, 否在都是后台计算复权
可选:
0
简单复权1
使用复权系数(复权因子)计算复权。
KLine.PriceGap(显示未回补缺口)
PriceGap.Enable
<boolean>
是否显示缺口
PriceGap.Count
<Number>
显示缺口数
KLine.UnchangeBarType( 十字星K线颜色)
<Number>
十字星K线颜色
0
(默认值) 使用平盘的颜色
1
与昨收价比较 上涨红 下跌绿
KLineTitle(设置k线标题)
KLineTitle.IsShowName(是否显示股票名称)
<boolean>
K线标题是否显示股票名称 (默认值true)
KLineTitle.IsShowSettingInfo(是否周期/复权)
<boolean>
K线标题是否周期/复权 (默认值true)
KLineTitle.TextSpace(文字间距)
<Number>
标题文字间距 默认一个空格的间距(只支持小程序,app)
KLineTitle.DateTimeSpace(日期后间距)
<Number>
日期时间输出向后间距 (小程序才有)
KLineTitle.PeriodSpace(周期后间距)
<Number>
周期输出向后间距 (小程序才有)
KLineTitle.NameSpace(名称后间距)
<Number>
名称输出向后间距(小程序才有)
KLineTitle.IsTitleShowLatestData(是否显示最后一个数据)
<boolean>
十字光标不在图形上, 标题栏显示最后一个数据, 默认值false
KLineTitle.ShowPostion(标题栏文字位置设置)
<Object>
标题栏文字位置设置
ShowPostion:{ Margin:{ Bottom:10, Left:10 } }
//Margin.Bottom 底部间距
//Margin.Left 左边间距
Border(坐标边框)
坐标边框
Border.Left(左距离)
<Number>
图表离左边的距离
Border.Right(右距离)
<Number>
图表离右边的距离
Border.Top (上距离)
<Number>
图表离上边的距离 注意:Top<5时 不会显示顶部的标题
Border.Bottom(下距离)
<Number>
图表离下边的距离 注意:Bottom<5 底部不显示X轴日期刻度文字
Border.AutoLeft 和Border.AutoRight(文字左右边的间距)
<Object>
注意:10226版本以后才支持
根据刻度文字自适应左边或右边边框间距
{Blank: 留白宽度, MinWidth:最小宽度 }
这里必须要设置Left>10或Right >10才会生效
实列代码:
Border: {Left: 10,//Right:10,AutoLeft:{ Blank:10, MinWidth:30 },// AutoRight:{ Blank:10, MinWidth:30 }}
Windows(指标窗口)
<Array>
指标窗口,数组可以配置多个指标窗口, 每个窗口单独设置
数组对象键配置
Index(窗口名称)
<String>
窗口名称
空指标
下面是设置一个空指标
var option=
{Type: '历史K线图',Windows:[ //窗口指标{ Index: 'EMPTY'} //设置一个空的指标 这样就不会显示指标了]
Modify(是否显示修改指标按钮)
<Boolean>
是否显示修改指标参数按钮
Change(是否显示切换指标)
<Boolean>
是否切换指标
Close(是否显示关闭指标)
<Boolean>
是否显示关闭指标窗口按钮(主图无效)
Overlay(是否显示叠加指标)
<Boolean>
是否显示叠加指标
MaxMin
<Boolean>
是否显示 窗口最大,最小化
TitleHeight (标题高度)
<number>
标题高度。 注意:当前标题高度<5就不会显示指标的标题
StringFormat(标题格式)
<number>
标题输入格式
选项:
1
(默认值) 默认格式 2位小数 单位自动转化 (万 亿)2
原始数据输出3
整形数据输出 如果不是整形使用 DEFAULT4
千分位分割
FloatPrecision(默认显示两位小数)
<number>
标题输出及刻度坐标显示小数位数
主图 只生效指标标题数值小数位数
副图 Y轴刻度信息小数位数, 指标标题数值小数位数
TitleFont(标题字体设置)
<String>
标题字体设置
TitleFont:“字体大小(fontSize) 字体格式(fontFamily)”
IsShortTitle (是否隐藏指标参数)
<Boolean>
是否隐藏指标参数(默认是false)
YAxis(副图生效)
Y轴刻度文字格式
YAxis: { // FloatPrecision: 1,//小数// StringFormat:2,//数据格式EnableRemoveZero:true,//是否去除小数后面的0ExcludeValue:false,//是否参与y轴计算
}
IsSync(同步/异步指标)
Boolean
同步/异步计算指标 true=同步 false=异步
IsShowIndexTitle(是否隐藏指标标题)
Boolean
是否隐藏指标标题(默认值为false)
动态执行脚本
- Name 动态执行脚本名字
- Script 动态执行的脚本
- Args 脚本参数 (可选)
- IsMainIndex 是否是主图指标, 如果是第1个指标窗口就是true,其他都是false。
- KLineType K线设置
可选值 | 作用 |
---|---|
-1 | 主图不显示K线(只在主图有效) |
0 | 在副图显示K线 |
1 | 在副图显示K线(收盘价线) |
2 | 在副图显示K线(美国线) |
API 远程指标 配置
属性 | |
---|---|
Id | 指标ID(可选填) |
Name | 指标显示名称 |
Script | 动态执行脚本(可选填) |
Args | 参数(可选填) |
url | 指标api调用地址 |
IsUsePageData | 是否使用了K线图当前屏的数据(默认是false) |
IsShowIndexName (显示指标名称)
Boolean
是否显示指标名称(默认是true)
IsShowTitleArrow(是否显示指标数据后箭头)
Boolean
是否显示指标数值后面的箭头
ArrowType(标信息上涨下跌箭头类型)
0
独立颜色
1
跟指标名字颜色一致
IndexParamSpace (标题数值间距)
number
标题指标输出数值间距
IsShowOverlayIndexName(是否显示叠加名称)
Boolean
是否显示叠加指标名字(默认值是true)
MaxMin(是否显示 窗口最大,最小化 )
Boolean
是否显示 窗口最大,最小化
TitleWindow(是否显示“折叠窗口")
Boolean
是否显示“折叠窗口"
AddIndexWindow(增加指标窗口)
增加指标窗口
Export(是否显示”导出数据")
Boolean
是否显示”导出数据"
OverlayIndexType(叠加指标设置 )
叠加指标设置
OverlayIndexType.Position(标题输出位置)
number
指标标题输出位置
可选值:
0
跟在主图指标标题后面,显示在同一个行
1
每个叠加指标单独一行指标标题
OverlayIndexType.LineSpace(标题行间距)
number
每一行指标标题行间距