当前位置: 首页 > news >正文

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) 自定义日线
41分钟
55分钟
615分钟
730分钟
860分钟
11120分钟
12240分钟 [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线
10renko
11Heikin Ashi
12line break
13high low
14外部定制K线图
15HLC 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 整形数据输出 如果不是整形使用 DEFAULT
  • 4 千分位分割

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
每一行指标标题行间距

相关文章:

  • (七)RestAPI 毛子(Http 缓存/乐观锁/Polly/Rate limiting)
  • MIT XV6 - 1.1 Lab: Xv6 and Unix utilities - sleep
  • springboot不连接数据库启动(原先连接了mysql数据库)
  • 【Axure高保真原型】3级多选下拉列表
  • rocketmq一些异常记录
  • 基于云原生架构的后端微服务治理实战指南
  • Python中的协程(Coroutine)
  • django admin 去掉新增 删除
  • 秒杀系统 Kafka 架构进阶优化
  • 用Node.js施展文档比对魔法:轻松实现Word文档差异比较小工具,实现Word差异高亮标注(附完整实战代码)
  • [原创](现代Delphi 12指南):[macOS 64bit App开发]: NSString类型与CFStringRef类型字符串相互转换.
  • Cursor 和Trae 产品使用及MCP应用
  • 【操作系统原理07】输入/输出系统
  • 部署mongodb三幅本集群
  • 02_值相同、类型不同,用 equals() 比较为什么是 false?
  • ipa包安装到apple手机上
  • 单片机-89C51部分:5、点亮LED
  • cocos creator使用jenkins打包流程,打包webmobile
  • python连接Elasticsearch并完成增删改查
  • 2.4java运算需要注意的细节
  • 伊朗港口爆炸死亡人数升至70人
  • 港理大公布多项AI+医工成果,助港建设国际医疗创新枢纽
  • 《卿本著者》译后记等内容被指表述不当,江苏人民出版社:即日下架
  • 中宣部版权管理局:微短剧出海面临版权交易不畅、海外维权较难等难题
  • 长三角议事厅|国际产业转移对中国产业链韧性的影响与对策
  • 研究|和去年相比,人们使用AI的需求发生了哪些变化?