HQChart使用教程100-自定义Y轴分段背景色

效果图

步骤

1. 注册Y轴自定义刻度创建事件

事件IDSCHART_EVENT_ID.ON_CREATE_CUSTOM_Y_COORDINATE,
如何注册事件详见教程　HQChart使用教程5- K线图控件操作函数说明　中的注册K线图事件监听

 this.Option.EventCallback=
[
	{
      event:JSCHART_EVENT_ID.ON_CREATE_CUSTOM_Y_COORDINATE,
        callback:(event, data, obj)=>{ this.OnCreateCustomYCoordinate(event, data, obj); }
    },
．．．．．．．．．．．．．．．．．．．
］

2. 配置Y轴背景色

回调函数格式function(event, data ,obj)

event

事件信息

data

Y轴数据 { ID:窗口索引, Frame:窗口实例 }

data.Frame.CustomHorizontalInfo[] 自定义Y刻度方这里

var info=new CoordinateInfo();
info.Type=5;	//刻度类型5固定值
info.Value=7;	//区间的最大值
info.AreaData={  Value:[6.0, 7.0], BGColor:"rgba(249,210,88,0.5)", Position:[0, 1 ] }

Value: [刻度起始数值，刻度结束数值]
BGColor:背景色
Position:[] 显示位置 0=左边 1=右边， 可以只显示一边。

obj

插件实例

示例

 this.OnCreateCustomYCoordinate=function(event, data ,obj)
{
    console.log("[OnCreateCustomYCoordinate] data ", data);
    if (data.ID==0)
    {
        var info=new CoordinateInfo();
        info.Type=5;
        info.Value=7;
        //info.Message=["40%", "40%"] 左右文字输出
        info.AreaData={  Value:[6.0, 7.0], BGColor:"rgba(249,210,88,0.5)", Position:[0, 1 ] }
        data.Frame.CustomHorizontalInfo.push(info);
        
        var info=new CoordinateInfo();
        info.Type=5;
        info.Value=8;
        //info.Message=["40%", "40%"]
        info.AreaData={  Value:[7.0, 8.0], BGColor:"rgba(93,202,119,0.5)", Position:[0, 1 ] }
        data.Frame.CustomHorizontalInfo.push(info);

        var info=new CoordinateInfo();
        info.Type=5;
        info.Value=9;
        //info.Message=["60%", "60%"]
        info.AreaData={  Value:[8.0, 9.0], BGColor:"rgba(43,190,174,0.5)", Position:[0, 1 ] }
        data.Frame.CustomHorizontalInfo.push(info);

        var info=new CoordinateInfo();
        info.Type=5;
        info.Value=10;
        //info.Message=["60%", "60%"]
        info.AreaData={  Value:[9.0, 10.0], BGColor:"rgba(125, 212, 251,0.5)", Position:[0, 1 ] }
        data.Frame.CustomHorizontalInfo.push(info);
        
    }
}

交流QQ群

如果还有问题可以加交流QQ群， 群号在git首页可以找到。

HQChart代码地址

github.com/jones2000/HQChart