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