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

效果图
步骤
- 1. 注册Y轴自定义刻度创建事件
- 2. 配置Y轴背景色
- - event
  - data
  - obj
  - 示例
交流QQ群
HQChart代码地址

效果图

在这里插入图片描述

步骤

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);}
}