HQChart使用教程10- 手机端页面设置的几个特殊属性

序

HQChart刚开始是一个PC端（c++)行情终端移植到PC端(js)页面平台上， 所以对于手机端一些特殊的功能，刚开始是参照PC端做的。 在交流群里大家提了很多移动端的宝贵意见，我们针对这些意见 单独给移动端增加了一些属性设置。

手机端K线Tooltip显示

在pc端页面tooltip我们使用div来实现的，显示在鼠标的位置上，手机端由于没有鼠标，我们采用统一显示在最左边的固定位置上，实现方式采用canves直接画上去， 不采用div方式，（这么做是为了兼容小程序，目前几大小程序平台都是不能创建dom， 所有如果使用div需要预先在外部把div创建好，这样会破坏我们的整个HQChart的独立性）, 在SetOption里设置如下属性就可以

var Option= {      
                KLine:  //K线设置
                {
                    ........
                    IsShowTooltip:false,                 //关闭Div tooltip
                },
                 ........
                ExtendChart:    //扩展图形
                [
                    {Name:'KLineTooltip' }  //增加手机端tooltip
                ],
                .......
 }

效果图（竖屏，横屏都支持)：

手机分时图Tooltip显示

var option=
{
    Type:'分钟走势图',
    ......
    ExtendChart: [ {Name:'MinuteTooltip' } ]
    ......
}

十字光标移动只能在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; //手势点击出现十字光标
    ......
}

手势上下允许滚动页面

var Option= 
{ 
    ....
    EnableScrollUpDown:true; //允许手势上下操作滚动页面
    ......
}

页面横屏

由于手机端可以禁用页面横屏所以，一般的css横屏有时候回无效。 HQChart提供了在竖屏模式下显示横屏K线图或走势图，　修改Type类型就可以

1. K线横屏

 var option=
  {
       Type:'历史K线图横屏',
       .........
 }

2. 分时图横屏

var option=
{
     Type:'分钟走势图横屏',
     ........
}

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

HQChart代码地址

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