HQChart使用教程50-Y轴自定义刻度设置说明
需求
有时候我们需要在主图Y轴刻度上, 增加一些自定义的刻度, 如最新价格, 或一个固定价格。
Frame 设置
通过设置Frame[0].Custom 我们可以自定义刻度
Custom
数组类型可以存放多组自定刻度信息
Type:类型
0=最新价格刻度
1=固定价格刻度(分时,K线图都支持)
2=当前屏最后一个K线收盘价刻度 (只支持K线图)
3=显示当前屏数据涨幅(只支持K线图)
var JSCHART_CUSTOM_YCOORDINATE_ID=
{
LATEST_VALUE_ID:0, //最新价格刻度
FIXED_VALUE_ID:1, //固定价格刻度
PAGE_LAST_PRICE_ID:2, //当前屏最后一个K线收盘价刻度
PAGE_DATA_INCREASE:3, //当前屏数据涨幅
PAGE_LAST_INDEX_VALUE_ID:4, //指标前屏最后一个数据刻度
};
Position: 文字显示位置 ‘left’,‘right’ (默认:right)
PositionEx: 1=文字绘制在坐标框架内部 (默认0)
FloatPrecision 显示小数位数,只支持K线,Type==0, 缺省跟品种的小数位数保持一致 (ver>=8742)
IsShowLine: 是否显示刻度虚线 (默认:true)
LineType 线段类型, 0=直线 2=虚线 -1=不画线 (默认2)
LineWidth 线段粗细 (默认1)
Data: 自定义刻度信息, 数据类型,(当Type=1时才才需要填)
{
Value:刻度Y轴价格 ,
Text:显示文本(可以缺省,缺省就使用Value的值输出), 10257版本以后支持多行文字输出
Color:线段及文字背景色, TextColor:文字颜色
}
DateTime 显示时间格式“HH:MM", 只有在Type=0, 并且是分钟K线的情况下有效
多行刻度文字
Custom:
[
............
{
Type:1,
Position:'right',IsShowLine:true, LineType:0,
Data:
[
{
Value:9.73,
Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
Text:
[
{Text:"第1行"},
{Text:"第2行", TextColor:"rgb(100,100,100)" } //TextColor 可以指定颜色,默认用外部的颜色
]
},
{
Value:9.50,
Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
}
]
},
..........
]
效果图
K线图例子
1 . 显示K线图最新价格刻度, 显示在左边
var option=
{
Type:'历史K线图',
......
Frame: //子框架设置 (Height 窗口高度比例值)
[
{
SplitCount:5, //最多输出5个分隔线
//Height:4,
IsShowLeftText:false, //不显示左边刻度文字
IsShowRightText:true, //显示右边刻度文字
Custom:
[
{
Type:0,
Position:'left',
}
]
},
}
效果图
2. 在K线上15.55, 17.55价格位置增加刻度
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:文字颜色
}
]
},
]
},
}
效果图
3. 显示最新价格刻度,并且在15.55, 17.55价格位置增加刻度 显示 止损和止盈
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:文字颜色
}
]
}
]
},
}
效果图
4. 分钟K线显示最新价格及时间
10265版本以后的才支持
Custom:
[
{
Type:0,
Position:'right',LineType:1, DateTime:"HH:MM"
},
......
]
效果图
走势图例子
1. 在2930点的位置显示刻度
var option=
{
Type:'分钟走势图'
......
Frame: //子框架设置
[
{
SplitCount:5,
IsShowLeftText:true,
IsShowRightText:true,
Custom:
[
{
Type:1,
Position:'left',
Data:
[
{
Value:2930,
Color:'rgb(0,34,255)', TextColor:'rgb(255,255,255)',
},
]
}
]
},
..........
效果图
2. 在涨幅 0.5%的位置显示刻度
var option=
{
Type:'分钟走势图'
......
Frame: //子框架设置
[
{
SplitCount:5,
IsShowLeftText:true,
IsShowRightText:true,
Custom:
[
{
Type:1,
Position:'left',
Data:
[
{
Increase:0.005, // Value:刻度Y轴价格 Text:显示文本 Increase:涨幅
Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
},
]
}
]
},
..........
效果图
3. 最新价格刻度
在收盘价图中右侧显示最新价格
var option=
{
Type:'分钟走势图'
..........
Frame: //子框架设置
[
{
SplitCount:5,IsShowLeftText:true,IsShowRightText:true,
Custom:
[
{ Type:0,Position:'righ' }
]
},
{SplitCount:3,IsShowLeftText:true,IsShowRightText:true},
{SplitCount:3,StringFormat:0},
],
效果图
动态更新Y轴自定义刻度
动态修改只能通过修改内部刻度信息来实现
下面是K线的例子, 走势图也一样
this.UpdateCustomY=function()
{
//修改指标1上Y轴自定义刻度
this.Chart.JSChartContainer.Frame.SubFrame[0].Frame.YSplitOperator.Custom=
[
{
Type:1,
Position:'right',IsShowLine:true,
Data:
[
{
Value:10.55,
Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
},
{
Value:10.31,
Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
}
]
}
];
this.Chart.JSChartContainer.UpdateFrameMaxMin(); //重新计算最大最小值
this.Chart.JSChartContainer.ResetFrameXYSplit(); //重新计算X,Y刻度
this.Chart.JSChartContainer.Draw(); //重绘
}
最新价格刻度颜色配置
配色位置在
function JSChartResource()
{
.......................................
//Y轴最新价格刻度颜色
this.FrameLatestPrice = {
TextColor:'rgb(255,255,255)', //最新价格文字颜色
UpBarColor:"rgb(238,21,21)", //上涨
DownBarColor:"rgb(25,158,0)", //下跌
UnchagneBarColor:"rgb(0,0,0)", //平盘
BGAlpha:0.6 // 刻度文字显示在坐标内部,背景的透明度
};
.............................
}
通过外部修改这几个变量就可以。
如何修改配色看教程 HQChart使用教程4- 如何自定义K线图颜色风格
单独修改刻度
this.TestPrice=9.30;
this.ChangePriceText=function()
{
this.TestPrice+=0.02;
this.Chart.JSChartContainer.Frame.SubFrame[0].Frame.YSplitOperator.Custom=
[
{
Type:1,
Position:'right',
IsShowLine:true,
LineType:0,
Data:
[
{
Value:this.TestPrice,
Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
}
]
}
];
this.Chart.JSChartContainer.Frame.SubFrame[0].Frame.YSplitOperator.Operator();
this.Chart.JSChartContainer.Draw();
}
回调事件
Y轴自定义事件JSCHART_EVENT_ID.ON_CREATE_CUSTOM_Y_COORDINATE
回调函数
function (event, data, obj)
data
{
ID:窗口id,
Frame:窗口实例,
PreventDefault:是否阻止内置的Y轴自定义刻度,
Custom:自定义刻度数组
}