-
Notifications
You must be signed in to change notification settings - Fork 758
2. 配置HQChart显示内容
HQChart初始化实例完成以后， 我们就可以通过SetOption配置显示内容， 如果分时图/K线图等等。
var chart=HQChart.Chart.JSChart.Init(this.$refs.kline);
var option=DefaultData.GetMinuteOption(); //配置一个分时图
chart.SetOption(option);
this.Chart=chart;显示的图形类型，字符串类型，可以配置以下内容 历史K线图|历史K线图横屏|分钟走势图|分钟走势图横屏|K线训练|K线训练横屏|深度图
窗口指标设置, 数组, 每一组对应一个窗口指标
系统指标ID/指标名称
是否显示修改指标参数按钮 (h5才有,建议在PC端页面使用）
是否显示切换指标按钮 (h5才有,建议在PC端页面使用)
是否显示关闭按钮 (h5才有,建议在PC端页面使用）
是否显示叠加指标按钮 (h5才有,建议在PC端页面使用）
标题高度 当标题高度<5 就不会显示指标的标题
标题输出格式 1=默认格式 2位小数 单位自动转化 (万 亿) 2=原始数据输出 3=整形数据输出 如果不是整形使用 DEFAULT 21=千分位分割
标题输出及刻度坐标显示小数位数(默认2) 主图 只生效指标标题数值小数位数 副图 Y轴刻度信息小数位数， 指标标题数值小数位数
标题字体设置,如“8px 微软雅黑”
指标标题缩写模式，只显示指标名字，隐藏指标参数. 默认false, 指标名字是MA(5,10,15) 设置true后就只显示MA 后面的参数就不显示了
修改系统指标参数或动态执行一个指标脚本
动态执行脚本名字
动态执行的脚本
脚本参数 （可选)
是否是主图指标， 如果是第1个指标窗口就是true，其他都是false。
K线设置 -1=主图不显示K线(只在主图有效) 0=在副图显示K线 1=在副图显示K线(收盘价线) 2=在副图显示K线(美国线)
Windows: //窗口指标
[
{ Name: 'MA_NEW', Script:'MA5:MA(CLOSE,5);'}, //自定义一个MA的指标 计算5日均线
{ Index: 'MACD'},
{ Index: 'RSI' }
], Windows: //窗口指标
[
{ Name: 'MA_NEW',
Script:'MA5:MA(CLOSE,N);'，
Args: [{ Name: 'N', Value: 10 }]
}, //自定义一个MA的指标 计算10日均线 （带参数）
{ Index: 'MACD'},
{ Index: 'RSI' }
],Windows: //窗口指标
[
//{Index:"EMPTY"},
{
Name:'MA测试', Description:'均线', IsMainIndex:true,KLineType:-1,
Args:[ { Name:'M1', Value:5}, { Name:'M2', Value:10 }, { Name:'M3', Value:20} ],
OutName:[ {Name:'MA1',DynamicName:"MA{M1}" }, {Name:'MA2',DynamicName:"MA{M2}" },{Name:'MA3',DynamicName:"MA{M3}" }],
Script: //脚本
'MA1:MA(CLOSE,M1);\n\
MA2:MA(CLOSE,M2);\n\
MA3:MA(CLOSE,M3);'
},
{Index:"MACD", Modify:true,Change:true},
{Index:"RSI", Modify:false,Change:false},
], Windows: //窗口指标
[
{ Index: 'MA',
Args: [{ Name: 'M1', Value: 5 }, { Name: 'M2', Value: 10 }, { Name: 'M3', Value: 20 }]
},
{ Index: 'MACD'},
{ Index: 'RSI' }
],指标上锁配置(可选)
是否上锁
点击锁区域的触发回调函数 解锁例子：
function unlockIndex(data)
{
console.log('[unlockIndex]' , data);
var chart=data.HQChart;
chart.LockIndex({IndexName:data.Data.IndexName, IsLocked:false});
}锁区域的背景颜色
锁区域文字颜色
锁区域文字显示
锁区域文字字体 支持iconfont
锁右边几根K线
指标后台计算配置
指标ID/名字
指标脚本(可选) , 如果是null,就根据指标名字查找系统指标
指标参数（可选），如果是null, 就用默认参数
后台指标计算api地址
Windows: //窗口指标
[
{ Index: 'MA',
API:
{ Name: 'MA',
Script: null,
Args: [{ Name: 'M1', Value: 5 }, { Name: 'M2', Value: 10 }, { Name: 'M3', Value: 20 }],
Url: 'http://127.0.0.1:18080/api/jsindex' }
},
{ Index: 'MACD'},
{ Index: 'RSI' }
],股票代码
是自动更新数据
自动更新数据频率, 默认30s, 单位ms
是否显示右键菜单 (h5才有,建议在PC端页面使用)
十字光标设置
左边的十字光标文字输出位置 0=隐藏 1=显示在框架外 2=显示在框架内
右边的十字光标文字输出位置 0=隐藏 1=显示在框架外 2=显示在框架内
底部十字光标日期位子输出位置 0=隐藏 1=显示在框架外
是否显示十字线
垂直线类型 0=虚线 1=实线 2=实线线段宽度和K线一样
水平线类型 0=虚线 1=实线 -1=隐藏
Y轴只能在K线收盘价移动
分时图十字光标只显示在价格线上
K线X轴日期显示格式 ，可选，缺省0。 0=YYYY-MM-DD => 2020-12-01 1=YYYY/MM/DD =>2020/12/01 2=YYYY/MM/DD/W => 2020/12/01/二 3=DD/MM/YYYY => 01/12/2020
主图Y轴文字 0=默认 1=千分位分割
副图Y轴文字 0=默认 1=千分位分割
分时图十字光标X轴最右边只能移动到最新的交易时间
X轴的竖线类型 0=标题栏不画竖线（默认） 1=竖线不中断
是否支持键盘esc隐藏十字线, left,right显示十字线， 默认false
十字光标右侧按钮配置 { Enable:true 是否开启右边按钮 }
k线配置
拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择(h5才有）
复权 0 不复权 1 前复权 2 后复权
周期 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 自定义秒
日线请求的最大个数 (天)
1分钟K线请求最大天数
初始一屏显示多少个K线数据
信息地雷 数组类型,可以放多个, 目前支持 ["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"]
信息地雷显示位置 0=显示在K线上 1=显示底部
是否显示内置ooltip, 包含k线提示信息，图标提示信息等等， (h5才有,建议在PC端页面使用)
是否显示K线的tooltip信息
K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图 5=订单流 6=完全空心K线柱子
首屏显示的起始日期 格式 yyyymmdd 20180401
1=以十字光标为中心缩放， 如果左或右边数据不过，适当调整中心的位置
初始一屏显示的K线宽度。K线个数有K线宽度内部计算得到。 注意： PageSize / DataWidth 只能设置一模式
K线上是否显示最大最小值
最后数据和右边框空白间距,空白的宽度=RightSpaceCount*k线宽度
是否启动双击K线弹出内置分时对话框. 默认是开启
内置复权算法类型， 0=简单复权， 1=使用复权系数（复权因子）计算复权。缺省为0 ** 只有在IsApiPeriod=false的时候才会使用前端计算复权， 否在都是后台计算复权**
周期和复权数据是否全部使用api获取， 默认周期和复权是本地计算的 (false=周期数据是前端合并, true=周期和复权数据都使用后台api数据）
周期说明 1分钟K线和日K为原始数据， 其他周期数据都是可以通过原始数据合并得到。 合并周期可以在前端完成也可以在后台完成。hqchart对这2种模式都是支持的。
前端合并周期数据模式, 设置IsApiPeriod=false， 这样周期数据都是通过1分钟K线或日K数据由hqchart前端内置合并完成。切换周期除了1分钟K线和日K会触发数据请求， 其他周期切换不会触发数据请求。 后台合并数据模式. 设置IsApiPeriod=true, 前端不做合并操作， 直接使用后台的数据，每次切换周期都会请求后台周期数据。
是否允许手势/键盘/鼠标缩放 { Touch:true/false, Mouse:true/false, Keyboard:true/false, Wheel:true/false }
默认移动5个数据,
标题设置
是否显示股票名称
是否显示周期/复权
标题文字间距 默认一个空格的间距(只支持小程序,app）
数据下载提示信息文字.
分时显示天数 1=当天分时图 2=2日分时图 3=3日分时图， 最多10天， 多日分时图就设置这个变量
标题设置
是否显示品种名称 默认是显示
标题是否显示时间
标题是否显示日期， 默认不显示
十字/手势不在K线图上,标题显示最新一个数据, 默认false
标题栏总是显示最新一条的分时图数据, 默认false
标题文字间距 默认一个空格的间距 (只支持小程序,app）
价格图是否使用面积图， 下图是没有使用面积图显示价格
是否显示均线
y轴最大最小计算方式 0=默认 以前收盘为中轴上下最大最小值分割 1=根据涨跌停值分割 通过MARKET_SUFFIX_NAME.GetLimitPriceRange()计算涨跌停价格 2=根据实际数据最大最大值分割
是否启动分时图区间选择 默认false
默认 false
边框间距设置
左间距
右间距
底部间距
顶部间距
根据刻度文字自适应左边或右边边框间距 {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 },
}UI语言 英文 'EN' 中文:'CN' 繁体:'TC'
指标窗口设置,数组
窗口Y轴刻度个数
是否显示左边的刻度
是否显示右边刻度
窗口高度比值
Y轴刻度风格方式 ０＝自动分割（会自动调整最大最小）， １＝根据当前屏最大最小值平均分割
客户区域背景颜色
所有Y轴显示刻度如果小数位后面是0， 就抹去0。 默认是开启的 如刻度 [10.00， 15.00， 20.00] 抹零以后显示为[10, 15, 20]
Y轴刻度文字与刻度文字的最小间距, 小于这个间距隐藏后面的刻度文字
边框线显示控制 （1=上 2=下 4=左 8=右） 如果要下和右边框 BorderLine=2|8
顶部留白和底部留白， K线图默认上下都留白的。
是否显示指标标题信息, 默认是true
数组类型可以存放多组自定刻度信息
Type:类型 0=最新价格刻度（只有K线图支持,8347版本号以后的支持分时图) 1=固定价格刻度(分时,K线图都支持)
Position: 文字显示位置 ‘left’,‘right’ (默认:right)
FloatPrecision 显示小数位数，只支持K线，Type==0, 缺省跟品种的小数位数保持一致 （ver>=8742)
IsShowLine: 是否显示刻度虚线 (默认:true)
LineType 线段类型， 0=直线 2=虚线 -1=不画线 （默认2）
CountDown:true/false 是否启用K线倒计时
Data: 自定义刻度信息， 数据类型，（当Type=1时才才需要填）
{
Value：刻度Y轴价格 ，
Text:显示文本（可以缺省，缺省就使用Value的值输出), 10257版本以后支持多行文字输出
Color:线段及文字背景色, TextColor:文字颜色
}
DateTime 显示时间格式“HH:MM"， 只有在Type=0， 并且是分钟K线的情况下有效
var option=
{
Type:'历史K线图',
......
Frame: //子框架设置
[
{
SplitCount:5, //最多输出5个分隔线
IsShowLeftText:false, //不显示左边刻度文字
IsShowRightText:true, //显示右边刻度文字
Custom:
[
{
Type:0,
Position:'left',
}
]
},
}var option=
{
Type:'历史K线图',
......
Frame: //子框架设置 (Height 窗口高度比例值)
[
{
SplitCount:5, //最多输出5个分隔线
//Height:4,
IsShowLeftText:false, //不显示左边刻度文字
IsShowRightText:true, //显示右边刻度文字
Custom:
[
{
Type:1,
Position:'left',IsShowLine:true,
Data:
[
{
Value:15.55,
Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
}，
{
Value:17.55,
Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
}
]
},
]
},
}var option=
{
Type:'历史K线图',
......
Frame: //子框架设置 (Height 窗口高度比例值)
[
{
SplitCount:5, //最多输出5个分隔线
//Height:4,
IsShowLeftText:false, //不显示左边刻度文字
IsShowRightText:true, //显示右边刻度文字
Custom:
[
{
Type:0,
Position:'right',
},
{
Type:1,
Position:'left',IsShowLine:true,
Data:
[
{
Value:15.55,
Text:'止损线', //Text:显示文本
Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
},
{
Value:17.55,
Text:'止盈线', //Text:显示文本
Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
}
]
}
]
},
}叠加股票 数组, 支持叠加多个股票. h5支持叠加多个品种， 小程序/app只支持叠加1个品种
叠加股票代码
叠加股票K线图 类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子。 默认跟主图K线类型一致。
线段颜色,不填随机选一个颜色
var option=
{
Type:'历史K线图',
......
Overlay:
[
{Symbol:'000001.sh', DrawType:0},
{Symbol:'002415.sz', DrawType:1}
]
.........
}扩张图形 数组类型 目前支持
扩展图形名称 'KLineTooltip' K线图tooltip 'MinuteTooltip' 分时图tooltip '画图工具' 画图工具 '筹码分布' { Name:'筹码分布', ShowType:1, IsShowX:true , ShowXCount:3, Width:250 }
叠加指标 数组 可以叠加多个指标
指标名称/ID
叠加到对应的窗口索引 0开始
是否和主图指标公用Y轴 (默认是false, 独立Y轴坐标)
共享Y轴时，叠加指标的数据是否影响共享Y轴最大最小值，默认true
每个子坐标的间距
是否显示右侧子坐标， 可以缺省, 默认true
指标参数 Name:变量名 Value:数值 如：Args:[ { Name:‘M1’, Value:20}, { Name:‘M2’, Value:30} ]
远程API指标 { Name:指标名称,Script:指标脚本(可选）,Args：指标参数 }
第1个指标窗口 配置1个后台（多线段指标）指标，一个MACD指标, 一个动态指标）
OverlayIndex:
[
{
Index:'多线段指标', Windows:0 ,
API:
{
Name:'多线段指标',
Script:null,
Args:null,
Url:'http://127.0.0.1:18080/api/jsindex'
},
ShowRightText:true
},
{Index:'MACD', Windows:0 },
{Windows:0, IndexName:"指标ID", Name:"自定义指标", Script:"T:MA(O,20);", Identify:"guid_66990"}
//{Index:'MA', Windows:1 }
], //叠加指标手离开屏幕十字光标自动隐藏 true/false
手势点击出现十字光标 true/false
手势上下允许滚动页面 true/false
注册事件数组，可以同时注册多个事件，回调函数格式同上一样
this.Option=
{
Type:'历史K线图', //创建图形类型
EventCallback:
[
{
event:事件ID
callback:回调函数
}，
.....
],
..........是否允许弹出区间统计框
是否显示选中的画图图形的X，Y轴信息
指标图形选中， 默认是禁止的 EnableSelected 是否开启选中状态 EnableMoveOn 鼠标在图形上是否显示手的形状
是否启动拖拽指标图形， 默认关闭
0=使用div按钮 1=使用canvas绘图按钮,新功能的按钮都使用这个 (默认0)