HQChart使用教程71-如何自定义Y轴刻度线
自定义Y轴刻度线
HQChart K线主图Y轴价格刻度默认使用内部自动分割的方式， 你也可以通过覆盖自定义分割刻度方法接口，来自己实现自己需要的Y轴刻度
步骤
1. 自定义Y刻度线函数
FrameSplitKLinePriceY.SplitCustom 函数是自定义X轴刻度接口， 你只要在这个函数实现自己的刻度分割就可以。
FrameSplitKLinePriceY.SplitCustom=(splitKLine,splitData,defaultfloatPrecision)=>
{
klineControl.YSplitCustom(splitKLine,splitData,defaultfloatPrecision);
}
2. 参数说明
splitKLine
刻度线实例变量， 保存了需要显示的刻度线信息
splitData
当前屏信息
Max=当前屏数据最大值
Min=当前屏数据最小值
如果要调整当前屏的最大,最小值, 修改这2个数据就可以
defaultfloatPrecision
品种价格的小数位数
3. 小程序
import {
JSCommon} from '../../umychart.uniapp/umychart.wechat.3.0.js'
.......
JSCommon.FrameSplitKLinePriceY.SplitCustom=function(splitKLine,splitData,defaultfloatPrecision)
{
......................
}
4. Vue
import HQChart from 'hqchart'
.......
HQChart.Chart.FrameSplitKLinePriceY.SplitCustom=(splitKLine,splitData,defaultfloatPrecision)=>
{
................
}
简单的例子
this.YSplitCustom=function(splitKLine,splitData,defaultfloatPrecision)
{
splitKLine.Frame.HorizontalInfo=[]; //这个是用来保存绘制的刻度信息数组
var count=5;
var LINE_COLOR=
[
"rgb(142,229,238)", "rgb(55,218,185)","rgb(141,238,238)",
"rgb(255,228,225)","rgb(142,229,238)"
];
var LINE_TYPE=[1,2,2,1,2]; //1=实线 2=虚线
var interval=(splitData.Max-splitData.Min)/count;
for(var i=0,value=splitData.Min;i<count;++i,value+=interval)
{
splitKLine.Frame.HorizontalInfo[i]= new CoordinateInfo(); //刻度信息数据
splitKLine.Frame.HorizontalInfo[i].Value=value; //刻度对应的数值
splitKLine.Frame.HorizontalInfo[i].LineColor=LINE_COLOR[i]; //线段颜色
splitKLine.Frame.HorizontalInfo[i].TextColor='rgb(0,0,128)'; //文字颜色
splitKLine.Frame.HorizontalInfo[i].LineType=LINE_TYPE[i]; //线段类型 1=实线 2=虚线
splitKLine.Frame.HorizontalInfo[i].Message[0]=value.toFixed(defaultfloatPrecision); //左边刻度文字
splitKLine.Frame.HorizontalInfo[i].Message[1]=value.toFixed(defaultfloatPrecision); //右边刻度文字
}
}
刻度信息单条数据结构
//坐标信息
function CoordinateInfo()
{
this.Value; //坐标数据
this.Message=[]; //坐标输出文字信息
this.TextColor=g_JSChartResource.FrameSplitTextColor //文字颜色
this.Font=g_JSChartResource.FrameSplitTextFont; //字体
this.LineColor=g_JSChartResource.FrameSplitPen; //线段颜色
this.LineType=1; //线段类型 1=实线 2 虚线
}
注意
这个函数是全局替换的， 所有最好在页面退出的时候 把这个函数清空, 防止影响其他页面
FrameSplitKLinePriceY.SplitCustom=null;
交流QQ群: 950092318
如果还有问题可以加交流QQ群: 950092318
HQChart代码地址
地址：github.com/jones2000/HQChart
完整例子代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>K线图-自定义Y轴刻度</title>
<!-- 加载资源 -->
<link rel="stylesheet" href="../jscommon/umychart.resource/css/tools.css" />
<link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>
<body>
<div id="kline" style="width: 900px;height:400px;position: relative;"></div>
<script src="content/js/jquery.min.js"></script>
<script src="content/js/webfont.js"></script>
<script src='../jscommon/umychart.console.js'></script> <!-- 日志输出 -->
<script src="../jscommon/umychart.network.js"></script> <!-- 网络请求分装 -->
<script src="../jscommon/umychart.js"></script> <!-- K线图形 -->
<script src="../jscommon/umychart.complier.js"></script> <!-- 麦语言解析执行器 -->
<script src="../jscommon/umychart.index.data.js"></script> <!-- 基础指标库 -->
<script src="../jscommon/umychart.style.js"></script> <!-- 白色风格和黑色风格配置信息 -->
<script>
//JSConsole.Chart.Log=() =>{}
//JSConsole.Complier.Log=()=>{}
//MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) { return 2; }
//简单的把K线控件封装下
function KLineChart(divKLine)
{
this.DivKLine=divKLine;
this.Chart=JSChart.Init(divKLine); //把K线图绑定到一个Div上
//K线配置信息
this.Option= {
Type:'历史K线图', //创建图形类型
//Type:'历史K线图横屏',
//EnableBorderDrag:false,
Windows: //窗口指标
[
{
Index:'MA', Change:true },
{
Index:"AMO", Modify:false, Change:false, Close:false },
{
Index:"RSI", Modify:false,Change:false},
],
Symbol:'600000.sh',
IsAutoUpdate:true, //是自动更新数据
AutoUpdateFrequency:10000, //数据更新频率
//TradeIndex: {Index:'交易系统-BIAS'}, //交易系统
IsShowRightMenu:true, //右键菜单
//CorssCursorTouchEnd:true,
//IsCorssOnlyDrawKLine:true,
CorssCursorInfo: {
DateFormatType:2 },
KLine: //K线设置
{
DragMode:1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
Right:1, //复权 0 不复权 1 前复权 2 后复权
Period:0, //周期 0 日线 1 周线 2 月线 3 年线
MaxReqeustDataCount:3000, //数据个数
MaxRequestMinuteDayCount:20, //分钟数据获取几天数据 默认取5天数据
PageSize:50, //一屏显示多少数据
//Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"], //信息地雷
IsShowTooltip:true, //是否显示K线提示信息
DrawType:0, //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
//FirstShowDate:20161201,
KLineDoubleClick:false, //禁止双击弹框
RightSpaceCount:5,
ZoomType:1,
StepPixel:10,
//DataWidth:5
ShowKLine:false,
},
KLineTitle: //标题设置
{
IsShowName:true, //不显示股票名称
IsShowSettingInfo:true //不显示周期/复权
},
Border: //边框
{
Left:80, //左边间距
Right:80, //右边间距
Bottom:25, //底部间距
Top:25 //顶部间距
},
Frame: //子框架设置
[
{
SplitCount:6, IsShowLeftText:false, IsShowYLine:true,
Custom:
[
{
Type:0,
Position:'right',LineType:2,
}
]
},
{
SplitCount:4, IsShowLeftText:false, IsShowYLine:true },
{
SplitCount:4, IsShowLeftText:false, IsShowYLine:true}
],
ExtendChart: //扩展图形
[
//{Name:'KLineTooltip' } //手机端tooltip
],
Overlay:
[
// {Symbol:'399300.sz', DrawType:1, Color:'rgb(0,0,255)'}
],
};
this.Create=function() //创建图形
{
var self=this;
//$(window).resize(function() { self.OnSize( {Type:1} ); }); //绑定窗口大小变化事件
$(window).resize(function() {
self.OnSize( ); }); //绑定窗口大小变化事件
var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
//blackStyle.DRAWICON={ MinSize:20 , MaxSize:60};
//JSChart.SetStyle(blackStyle);
//this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景
//MARKET_SUFFIX_NAME.GetCustomDecimal=(symbol)=>{ return 4; }
//MARKET_SUFFIX_NAME.GetDefaultDecimal=(symbol)=>{ return 3;}
var resource=JSChart.GetResource();
this.OnSize(); //让K线全屏
this.Chart.SetOption(this.Option); //设置K线配置
}
this.OnSize=function(option) //自适应大小调整
{
var height= $(window).height()-50;
var width = $(window).width();
this.DivKLine.style.top='0px';
this.DivKLine.style.left='0px';
this.DivKLine.style.width=width+'px';
this.DivKLine.style.height=height+'px';
this.Chart.OnSize(option);
}
this.YSplitCustom=function(splitKLine,splitData,defaultfloatPrecision)
{
splitKLine.Frame.HorizontalInfo=[];
var count=5;
var LINE_COLOR=
[
"rgb(142,229,238)", "rgb(55,218,185)","rgb(141,238,238)",
"rgb(255,228,225)","rgb(142,229,238)"
];
var LINE_TYPE=[1,2,2,1,2]; //1=实线 2=虚线
var interval=(splitData.Max-splitData.Min)/count;
for(var i=0,value=splitData.Min;i<count;++i,value+=interval)
{
splitKLine.Frame.HorizontalInfo[i]= new CoordinateInfo();
splitKLine.Frame.HorizontalInfo[i].Value=value;
splitKLine.Frame.HorizontalInfo[i].LineColor=LINE_COLOR[i]
splitKLine.Frame.HorizontalInfo[i].TextColor='rgb(0,0,128)';
splitKLine.Frame.HorizontalInfo[i].LineType=LINE_TYPE[i];
splitKLine.Frame.HorizontalInfo[i].Message[0]=value.toFixed(defaultfloatPrecision);
splitKLine.Frame.HorizontalInfo[i].Message[1]=value.toFixed(defaultfloatPrecision);
}
}
}
$(function ()
{
WebFont.load({
custom: {
families: ['iconfont'] } }); //预加载下iconfont资源
var klineControl=new KLineChart(document.getElementById('kline'));
FrameSplitKLinePriceY.SplitCustom=(splitKLine,splitData,defaultfloatPrecision)=> {
klineControl.YSplitCustom(splitKLine,splitData,defaultfloatPrecision); }
klineControl.Create();
})
</script>
</body>
</html>
<style>
</style>