HQChart使用教程52- 自定義手機端K線圖Tooltip

內置Tooltip類

hqchart 內置一個tooltip類KLineTooltipPaint， 如果不能滿足你的輸出格式要求，可以通過外部派生這個類，來改寫

創建自定義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);
                
                //把需要的字段都輸出就可以 這裏就不寫了
            }
        }

如果還有問題可以加交流QQ羣: 950092318

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