HQChart使用教程77-Y,X轴刻度文字创建事件回调
需求
有时候我们需要修改Y轴的左右的坐标文字,如下图
HQChart提供文字生成以后的事件回调(JSCHART_EVENT_ID.ON_SPLIT_YCOORDINATE),在回调里面修改文字就可以.
步骤
事件名称
JSCHART_EVENT_ID.ON_SPLIT_YCOORDINATE 注册这个事件回调就可以.
如果注册监听事件看教程 HQChart使用教程5- K线图控件操作函数说明
........
this.Chart.SetOption(this.Option); //设置K线配置
.......
//注册监听事件
this.Chart.AddEventCallback(
{
event:JSCHART_EVENT_ID.ON_SPLIT_YCOORDINATE,
callback:(event, data, obj)=>{ this.OnSplitYCoordinate(event, data, obj); }
});
回调事件结构说明
回调样式
this.OnSplitYCoordinate=function(event, data ,obj)
event
事件信息
obj
框架实例
data
刻度信息
{ ID: 窗口索引(0开始), Frame: 框架实例 }
Frame.HorizontalInfo 是hqchart内置生成的坐标信息文字, 是一个数组, 直接修改这个文件信息就可以.
单个数据项接口说明, 直接看源码好了. Message[0]=左边文字, Message[1]=右边文字
//坐标信息
function CoordinateInfo()
{
this.Value; //坐标数据
this.Message=[]; //坐标输出文字信息 0=左 1=右 2=内左 3=内右
this.TextColor=g_JSChartResource.FrameSplitTextColor //文字颜色
this.Font=g_JSChartResource.FrameSplitTextFont; //字体
this.LineColor=g_JSChartResource.FrameSplitPen; //线段颜色
this.LineDash=null; //当线段类型==2时 可以设置虚线样式
this.LineType=1; //线段类型 -1 不画线段 2 虚线 8,9=集合竞价坐标
this.LineWidth;
this.ExtendData; //扩展属性
//Y轴文字偏移
//this.YOffset=[{ Offset:5}, { Offset:10}] //目前只对框子外的刻度文字生效
}
简单的例子
this.OnSplitYCoordinate=function(event, data ,obj)
{
console.log('[MinuteChart::OnSplitYCoordinate]', event, data);
if (data.ID==2) //第几个指标窗口
{
var frame=data.Frame;
for(var i in frame.HorizontalInfo)
{
var item=frame.HorizontalInfo[i];
item.Message[0]+="¥"; //左边
item.Message[1]+="$"; //右边
}
}
else if (data.ID==0)
{
var frame=data.Frame;
for(var i in frame.HorizontalInfo)
{
var item=frame.HorizontalInfo[i];
item.Message[0]+="~"; //左边
item.Message[1]+="~"; //右边
}
}
}
多行刻度文字
this.OnSplitYCoordinate=function(event, data, obj)
{
if (data.ID==0)
{
var frame=data.Frame;
frame.MultiTextFormat=3; //固定设置3=多行输出格式
for(var i=0;i<frame.HorizontalInfo.length;++i)
{
var item=frame.HorizontalInfo[i];
var text=
[
{ Text:item.Message[0] }, //Text:文字 Color:颜色(缺省使用外面的颜色)
{ Text:item.Message[1] },
];
if (i==3)
{
text[0].Color="rgb(0,100,200)";
}
item.Message[0]=text;
item.Message[1]=text;
}
}
}
调整Y轴最大最小值
data.Frame.HorizontalMax //最大值
data.Frame.HorizontalMin //最小值
X轴分割线事件
JSCHART_EVENT_ID.ON_SPLIT_XCOORDINATE
HQChart代码地址
地址:github.com/jones2000/HQChart
个人爱好摄影/模型