HQChart使用教程50-Y轴自定义刻度设置说明
需求
有时候我们需要在主图Y轴刻度上， 增加一些自定义的刻度， 如最新价格， 或一个固定价格。
Frame 设置
通过设置Frame[0].Custom 我们可以自定义刻度
Custom
数组类型可以存放多组自定刻度信息
Type:类型 0=最新价格刻度（只有K线图支持,8347版本号以后的支持分时图) 1=固定价格刻度(分时,K线图都支持)
Position: 文字显示位置 ‘left’,‘right’ (默认:right)
IsShowLine: 是否显示刻度虚线 (默认:true)
Data: 自定义刻度信息， 数据类型，（当Type=1时才才需要填）
{
Value：刻度Y轴价格 ， Text:显示文本（可以缺省，缺省就使用Value的值输出),
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:文字颜色
}
]
}
]
},
}
效果图
走势图例子
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(); //重绘
}
如果还有问题可以加交流QQ群: 950092318
HQChart代码地址
地址：github.com/jones2000/HQChart