HQChart使用教程49-指标配置项说明

HQChart

已于 2024-12-04 21:59:44 修改

阅读量6.3k

点赞数 3

分类专栏： HQChart JavaScript 文章标签： HQChart KLine K线图股票量化 1024程序员节

于 2019-11-06 12:19:18 首次发布

本文链接：https://blog.csdn.net/jones2000/article/details/102928907

版权

HQChart 同时被 2 个专栏收录

169 篇文章

订阅专栏

JavaScript

151 篇文章

订阅专栏

简单的指标配置

简单的指标配置项请参看 HQChart使用教程1- 如何快速创建一个K线图页面

说明

K线图指标配置从第1个指标窗口开始
分时图指标配置从第3个指标窗口开始，前面2个窗口是固定的，无法配置。

指标配置项

1. 标题高度

TitleHeight 当标题高度<5 就不会显示指标的标题

2. 标题输出格式

StringFormat 1=默认格式 2位小数单位自动转化 (万亿)
2=原始数据输出
3=整形数据输出如果不是整形使用 DEFAULT
21=千分位分割

3.1 标题输出及刻度坐标显示小数位数

FloatPrecision 小数位数(默认2)
主图 只生效指标标题数值小数位数
副图 Y轴刻度信息小数位数，指标标题数值小数位数
例子:

var option=
{
     Type:'历史K线图', 
     Windows: 
     [
         {
             Index:"MA",FloatPrecision:6
         },
         {
             Index:'文字标记',
             API: 
             {
                 Name:'文字标记',
                 Script:null,
                 Args:null, 
                 Url:'http://127.0.0.1:18080/api/jsindex' 
             },
             FloatPrecision:4
             
         },
         {
             Index:"MACD", FloatPrecision:5,
         },
                 
     ], //窗口指标

在这里插入图片描述

3.2 标题字体设置

TitleFont 标题字体如“8px 微软雅黑”

3.3 隐藏指标参数

IsShortTitle 默认false, 指标名字是MA(5,10,15) 设置true后就只显示MA 后面的参数就不显示了

3.4 Y轴刻度文字格式

YAxis

YAxis: 
{ 
	FloatPrecision:0,  //小数位数
	StringFormat:2 ，  //数据格式 0=默认  2=原始数据输出
	EnableRemoveZero: true, //是否自动去掉小数点后面的0。 true|false
	ExcludeValue:false,	//不参数Y轴的计算 true|false (默认=false)
}

3.5 同步/异步计算指标

IsSync true=同步计算指标，在K线显示前同步计算好指标， false=异步计算指标，在K线显示以后，计算指标，然后更新指标数据在显示界面上。

3.5 隐藏指标标题

IsShowIndexTitle 默认true

4. 空指标

有时候我们可能在主图上不需要显示指标，我们可以通过设置一个空的来实现

var option=
{
   Type: '历史K线图',
    Windows: //窗口指标
    [
       { Index: 'EMPTY'}, //设置一个空的指标 这样就不会显示指标了
       { Index: 'MACD'},
       { Index: 'RSI' }     
   ],
   ..........

5 动态执行指标脚本

Name 动态执行脚本名字
Script 动态执行的脚本
Args 脚本参数（可选)
IsMainIndex 是否是主图指标，如果是第1个指标窗口就是true，其他都是false。
KLineType K线设置 -1=主图不显示K线(只在主图有效) 0=在副图显示K线 1=在副图显示K线(收盘价线) 2=在副图显示K线(美国线)

例子1. 自定义指标

 Windows: //窗口指标
  [
     {  Name: 'MA_NEW', Script:'MA5:MA(CLOSE,5);'}, //自定义一个MA的指标 计算5日均线
     { Index: 'MACD'},
     { Index: 'RSI' }     
 ],

例子2. 自定义指标+参数

 Windows: //窗口指标
  [
     {  Name: 'MA_NEW', 
        Script:'MA5:MA(CLOSE,N);'，
        Args: [{ Name: 'N', Value: 10 }]
     }, //自定义一个MA的指标 计算10日均线 （带参数）
     { Index: 'MACD'},
     { Index: 'RSI' }     
 ],

例子3 自定义主图指标+隐藏主图K线

this.Option= {
Type:'历史K线图',   //创建图形类型

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

6 系统指标带参数

Index 系统指标名字
Args 脚本参数（可选) Name:参数变量名 Value:参数值

Windows: //窗口指标
  [
     {  Index: 'MA', 
        Args: [{ Name: 'M1', Value: 5 }, { Name: 'M2', Value: 10 }, { Name: 'M3', Value: 20 }]
     }, 
     { Index: 'MACD'},
     { Index: 'RSI' }     
 ],

7 API 远程指标计算

API 所有配置都在API这个子文档内

ID

指标ID （可选）

Name

指标的显示名字

Script

动态执行脚本（可选）

Args

参数（可选）

Url

指标api调用地址

IsUsePageData

true/false(可选）默认 false. 是否使用了K线图当前屏的数据，如当前屏的显示的索引，当前屏的最高最低等等。设置为true，屏幕缩放，移动都会触发指标重新计算。

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' }     
 ],

8. 隐藏指标名字

IsShowIndexName false隐藏指标名字

9. 指标数据间距设置

IndexParamSpace 标题指标输出数值间距

10. 指标数据箭头

IsShowTitleArrow 是否显示指标数值后面的箭头

var option= 
{
     Type:'历史K线图',   //创建图形类型
     
     Windows: //窗口指标
     [
         {Index:"EMPTY", Modify:false,Change:false,TitleHeight:0 },
         {Index:"VOL", Modify:false,Change:false,IsShowTitleArrow:false, IsShowIndexName:false, IndexParamSpace: 10 }, 
         //{Index:"RSI", Modify:false,Change:false}, 
     ],

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

11. 是否显示叠加指标名字

IsShowOverlayIndexName 默认显示

 Windows: //窗口指标
[
                    
 {Index:'神奇九转', Change:true,IsShowOverlayIndexName:false},
 {Index:"MACD2", Modify:false,Change:false,TitleFont:"8px 微软雅黑"}, 
],

12 指标按钮配置

每个指标窗口都是配置独立的指标按钮
如下面的代码。

var option=
{ 
	Windows: //窗口指标
	[
	    {Index:"MA", Export:true, Modify:true },
	    {Index:"MACD", Close: false }
	    ........
	]
}

Modify

是否显示’改参数’按钮

Change

是否显示’换指标’

Close

是否显示’关闭指标窗口’ , 第1个窗口无效，不能被关闭

Overlay

是否显示叠加指标

MaxMin

是否显示窗口最大，最小化

TitleWindow

是否显示“折叠窗口"

AddIndexWindow

增加指标窗口

Export

是否显示”导出数据"

注意：MaxMin,TitlteWindow,Export 这3个按钮只能再按钮2的模式下有效，设置代码如下

JSChart.GetResource().ToolbarButtonStyle=1;
.........
this.Chart.SetOption(this.Option);  //设置K线配置

全局指标样式配置

this.TitleFont=13*GetDevicePixelRatio() +'px 微软雅黑';          //指标显示,tooltip显示字体
this.IndexTitleBGColor='rgb(250,250,250)';                      //指标名字背景色
this.IndexTitleBorderColor='rgb(180,180,180)';                  //指标名字边框颜色
this.IndexTitleBorderMoveOnColor='rgb(0,0,0)';                   //指标名字边框颜色(鼠标在上面)
this.IndexTitleBorderStyle=1,                                   //0=直角边框 1=圆角边框
this.IndexTitleColor="rgb(43,54,69)";                           //指标名字颜色
this.IndexTitleSelectedColor="rgb(65,105,225)";
this.OverlayIndexTitleBGColor='rgba(255,255,255,0.7)';
this.IndexTitleMerginLeft=1;        //指标输出左边间距
    
this.IndexTitle=
{
     UpDownArrow:    //数值涨跌箭头
     {
         UpColor:"rgb(238,21,21)",   //上涨
         DownColor:"rgb(25,158,0)",  //下跌
         UnchangeColor:"rgb(0,0,0)"  //不变
     },

     ArrowType:0,				//指标信息上涨下跌箭头类型 0=独立颜色 1=跟指标名字颜色一致
     EnableIndexArrow:true,  	//指标数值是否带上涨下跌箭头
	
	 //指标下拉箭头配置
     NameArrow:{ Color:"rgb(43,54,69)", Space:2, Symbol:'▼' },
 }