HQChart使用教程52- 自定义手机端K线图Tooltip

内置Tooltip类

hqchart 内置一个tooltip类KLineTooltipPaint, 分时图为MinuteTooltipPaint， 如果不能满足你的输出格式要求，可以通过外部派生这个类，来改写

创建自定义tooltip类

function CustomTooltip()
{
     this.newMethod = KLineTooltipPaint;   //派生
     this.newMethod();
     delete this.newMethod;

     this.Draw = function () 
     {
     }
}

挂接自定义类到hqchart

再setoption里面我可以配置一个外部tooltip创建方法，来替换内置的tooltip.

//K线配置信息
this.Option= {
   Type:'历史K线图',   //创建图形类型
   .......
   ExtendChart:    //扩展图形
   [
        {Name:'KLineTooltip',Create: function () { return new CustomTooltip(); }  }  //手机端tooltip
   ],

这样创建tooltip的时候，就会创建外部的CustomTooltip类了

简单的实现下CustomTooltip

KLineTooltipPaint 有几个成员变量再画图时会使用
this.Canvas; //画布 通过画布把数据显示上去
this.ChartBorder; //边框信息
this.Data; //K线数据
this.Width //宽度
this.Height //高度
this.LineHeight //行高
this.Font //字体 数组
this.HQChart; //hqchart实例

//自定义tooltip
        function CustomTooltip()
        {
            this.newMethod = KLineTooltipPaint;   //派生
            this.newMethod();
            delete this.newMethod;

            this.Draw = function () 
            {
                // 判断当前是否显示tooltip
                if (!this.IsEnableDraw()) return;   

                this.KLineTitlePaint=this.HQChart.TitlePaint[0];
                var klineData=this.KLineTitlePaint.GetCurrentKLineData();
                if (!klineData) return;

                //设置tooltip高度, 宽度
                var maxText=' 擎擎: 9999.99亿 ';  //最长的输出
                this.Width=this.Canvas.measureText(maxText).width;
                this.Height=100;

                this.DrawBG();
                this.DrawItem(klineData);
                this.DrawBorder();
            }   

            //显示当前数据
            this.DrawItem=function(item)
            {
                console.log('[CustomTooltip::Draw]', item);

                var defaultfloatPrecision=2;//价格小数位数
                var left=this.GetLeft()+2;
                var top=this.GetTop()+3;

                this.Canvas.textBaseline="top";
                this.Canvas.textAlign="left";
                this.Canvas.font=this.Font[0];
                var labelWidth=this.Canvas.measureText('擎擎: ').width;

                //日期
                var text=item.Date.toString();
                this.Canvas.fillStyle=this.TitleColor;
                this.Canvas.fillText(text, left,top);

                //收盘价
                top+=this.LineHeight;  
                this.Canvas.fillStyle=this.TitleColor;
                this.Canvas.fillText("开盘:", left,top);
                text=item.Open.toFixed(defaultfloatPrecision);
                this.Canvas.fillText(text,left+labelWidth,top);
                
                //把需要的字段都输出就可以 这里就不写了
            }
        }

挂接分时图tooltip

var option=
{
    Type:'分钟走势图',
    ExtendChart: [{Name:'MinuteTooltip', Create:function() { return new CustomTooltip();} }]

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

HQChart代码地址

https://github.com/jones2000/HQChart