HQChart使用教程48-如何自定义X轴刻度
HQChart X轴日期刻度默认使用内部自动分割的方式, 你也可以通过覆盖自定义分割刻度方法接口,来自己实现自己需要的X轴刻度
步骤
1. 覆盖X轴刻度函数
FrameSplitKLineX.SplitCustom 函数是自定义X轴刻度接口, 你只要在这个函数实现自己的刻度分割就可以。
FrameSplitKLineX.SplitCustom=function(split)
{
}
注意 如果是VUE 或 小程序 需要前面加上你import的名字
如:
import {JSCommon} from '../../umychart.uniapp/umychart.wechat.3.0.js'
.......
JSCommon.FrameSplitKLineX.SplitCustom=function(split)
{
}
2. 刻度类
通过 split.CreateCoordinateInfo() 可以创建一个刻度
刻度结构如下
//坐标信息
function CoordinateInfo()
{
this.Value; //坐标数据
this.Message=new Array(); //坐标输出文字信息
this.TextColor=g_JSChartResource.FrameSplitTextColor //文字颜色
this.Font=g_JSChartResource.FrameSplitTextFont; //字体
this.LineColor=g_JSChartResource.FrameSplitPen; //线段颜色
this.LineType=1; //线段类型 -1 不画线段 2 虚线
}
** LineType** 暂时不支持虚线,后续会支持
Message 这里使用Message[0] 作为刻度输出的文字
Value x轴的位置
4. 简单的demo
FrameSplitKLineX.SplitCustom=function(split)
{
var period=split.Period; //周期
var symbol=split.Symbol; //代码
var frame=split.Frame; //窗口框架
var klineData=frame.Data; //K线数据
var xOffset=klineData.DataOffset; //当前屏第1个数据的 数据偏移
var xPointCount=frame.XPointCount; //当前屏显示多少个数据
frame.VerticalInfo=[];
for(var i=0,index=xOffset; i<xPointCount && index<klineData.Data.length; ++i,++index)
{
var item=klineData.Data[index];
if (i%10!=0) continue;
console.log(`[FrameSplitKLineX.SplitCustom] Date=${item.Date} Time:${item.Time}`);
var info=split.CreateCoordinateInfo();
info.Value=index-xOffset; //X轴输出坐标
info.Message[0]=item.Date;
frame.VerticalInfo.push(info);
}
}
注意
这个函数是全局替换的, 所有最好在页面退出的时候 把这个函数清空, 防止影响其他页面
FrameSplitKLineX.SplitCustom=null;
如果还有问题可以加交流QQ群: 950092318
定制开发,数据购买,合作等商务事宜请联系 QQ:1586140774
HQChart代码地址
地址:github.com/jones2000/HQChart