HQChart使用教程21-十字光标设置说明

十字光标设置

在 SetOption() 中可以支持十字光标显示位置（框架外,框架内,隐藏)
设置 CorssCursorInfo 里面的变量就可以

var option=
{
   Type:'分钟走势图',
   ......
   CorssCursorInfo:{ Left:2, Right:1, Bottom:1, IsShowCorss:true },  //十字光标刻度设置

CorssCursorInfo变量说明

Left

左边的十字光标文字输出位置 0=隐藏 1=显示在框架外 2=显示在框架内

Right

右边的十字光标文字输出位置 0=隐藏 1=显示在框架外 2=显示在框架内

Bottom

底部十字光标日期位子输出位置 0=隐藏 1=显示在框架外

IsShowCorss

是否显示十字线

VPenType

垂直线类型 0=虚线 1=实线 2=实线线段宽度和K线一样

HPenType

水平线类型 0=虚线 1=实线 -1=隐藏

IsOnlyDrawKLine

K线图， 十字光标X轴只能在K线中心

IsShowClose

K线光标Y轴只能在K线收盘价移动 （IsOnlyDrawKLine必须是true)

IsOnlyDrawMinute

分时图十字光标只显示在价格线上

DateFormatType

K线X轴日期显示格式 ，可选，缺省0。
0=YYYY-MM-DD => 2020-12-01
1=YYYY/MM/DD =>2020/12/01
2=YYYY/MM/DD/W => 2020/12/01/二
3=DD/MM/YYYY => 01/12/2020 (10063版本以后的才支持）

IsFixXLastTime

分时图十字光标X轴最右边只能移动到最新的交易时间 (9940版本以后才支持)

VLineType

X轴的竖线类型 0=标题栏不画竖线（默认） 1=竖线不中断 (10186版本以后才支持）
VLineType=1

RightButton

右边按钮
{
Enable:true 是否开启右边按钮
}

点击事件

JSCHART_EVENT_ID.ON_CLICK_CROSSCURSOR_RIGHT， 注册事件详见HQChart使用教程5- K线图控件操作函数说明

按钮配色

配置颜色

修改颜色

var resource=JSChart.GetResource();	//获取配置颜色资源
resource.CorssCursorVPenColor="rgba(130,130,130,0.6)";	//修改垂直线颜色
.........
//修改颜色必须放在图形初始化前!!!!!!
var chart=JSChart.Init(document.getElementById('kline'));

例子1

CorssCursorInfo:{ Left:1, Right:1, Bottom:1, IsShowCorss:true }
显示十字线， 十字光标刻度都现在是框架外

例子2

CorssCursorInfo:{ Left:1, Right:0, Bottom:1, IsShowCorss:true }
显示十字线， 十字光标右边文字隐藏，其他都现在是框架外

例子3

CorssCursorInfo:{ Left:2, Right:0, Bottom:1, IsShowCorss:true }
显示十字线， 十字光标右边文字隐藏，左边文字在框架内显示，底部文字在框架外显示

例子4

CorssCursorInfo:{ Left:0, Right:2, Bottom:1, IsShowCorss:true }
显示十字线， 十字光标左边文字隐藏，右边文字在框架内显示，底部文字在框架外显示

例子5 实线

CorssCursorInfo:{ Left:1, Right:2, Bottom:1, IsShowCorss:true, VPenType:1, HPenType:1 }

用例5 水平实线，垂直线粗线

（这个只有K线才有效)
CorssCursorInfo:{ Left:1, Right:2, Bottom:1, IsShowCorss:true, VPenType:2, HPenType:1 },
垂直线颜色需要手动改成透明色才可以。

走势图和k线图一样的设置

手机端十字光标设置

十字光标移动只能在K线上移动

pc端十字光标是跟随鼠标的， 所有十字光标X轴竖线可以出现的任何位置（包括K线和K线间的空白地方，见下图）
移动端上我们增加了只能在K线上移动， 不允许X轴竖线画在K线柱子外面，如果当前手势点的位置不在K线上，取最近的一个K线
在SetOption里设置如下属性就可以

var Option= { 
         ....
         IsCorssOnlyDrawKLine:true;  //十字光标只能在K线上
          .....
         }

手离开屏幕十字光标自动隐藏

在SetOption里设置如下属性就可以 （K线，走势图都支持）

 var Option= { 
         ....
        CorssCursorTouchEnd:true; //手势结束十字光标自动隐藏
        ......
}

手势点击出现十字光标

var Option= 
{ 
    ....
    IsClickShowCorssCursor:true; //手势点击出现十字光标
    ......
}

交流QQ群

如果还有问题可以加交流QQ群: 950092318

HQChart代码地址

地址：https://github.com/jones2000/HQChart

个人爱好(模型/摄影)