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** 1=线段 2=虚线
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