HQChart使用教程55- 自定義PC端K線圖Tooltip

效果圖

在原來tooltip增加一列數據

PC端Tooltip

pc端tooltip由div組成的，這個和移動端的tooltip不一樣，移動端的是在canvas自己繪製的。所以如果要定製自己的tooltip輸出，只需要修改tooltip的div元素和內容就可以

tooltip css

k線tooltip div對應的css名字爲jschart-tooltip 如果要修改樣式直接在外面把這個樣式覆蓋就可以
以下是hqchart內部默認的tooltip css.

/*tooltip的外層樣式*/
.jschart-tooltip{
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
    border: solid 1px rgba(200, 210, 219, 0.92);
    padding:7px 20px 15px 13px;
    box-sizing: border-box;
    position:relative;
    display: none;
    z-index: 9;
}

/*tooltip的內層樣式*/
.tooltip-title{
    color:#2b3645;
    font-family: 微軟雅黑;
    font-size:12px;
    text-align:center;
    display: block;
    line-height: 24px;
}
.tooltip-con{
    color:#2b3645;
    font-family: 微軟雅黑;
    font-size:12px;
    line-height: 24px;
}
.tooltip-num{
    font-family: 微軟雅黑;
    font-size:12px;
    line-height: 24px;
    text-align: right;
    display:inline-block;
    width:90px;
}

數據輸出格式化類

tooltip內容輸出由專門的K線tooltip格式化類完成（類名HistoryDataStringFormat), 如果要自定義，可以自己寫一個新類來替換內置的類。

類成員變量

this.Value

包含當前K線的數據和 K線線段繪製類

this.Text

最後輸出div的html內容

this.Symbol

股票代碼

this.LineCount

一共顯示幾行

this.Width

div的寬度

this.LanguageID

輸出的語言

成員函數

this.Operator

this.Operator=function() {} 這個函數裏面完成對K線的輸出格式的拼接，　返回true/false, 如果返回false就不顯示tooltip

下面是一個空tooltip的格式化類

//行情tooltip提示信息格式
function CustomHistoryDataStringFormat()
{
    this.Value;     //數據
    this.Text;      //輸出字符串

    this.Symbol;
    this.LanguageID=JSCHART_LANGUAGE_ID.LANGUAGE_CHINESE_ID;//語言
    this.LineCount=0;    //一共幾行
    this.Width=157;     //寬度

    this.Operator=function()    //拼div html 字符串 返回 true/false   注意false不顯示tooltip
    {
    }

掛接自己的tooltip格式化類

所有格式化類都是由格式化類工廠創建的，我們只要替換到類工廠創建的方法就可以。

下面是示類

獲取全局的格式化類工廠實例
替換K線tooltip格式化類創建方法，改成我們自己的格式化類
注意這個必須放在SetOption前面

JSChart.GetDivTooltipDataFormat().DataMap.set(
'HistoryDataStringFormat', 
{ Create:()=> { return new CustomHistoryDataStringFormat() } } 
);

完整示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>PC自定義Tooltip(K線圖)</title>  
    <!-- 加載資源 -->
    <link rel="stylesheet" href="../jscommon/umychart.resource/css/tools.css" />
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>  
<body>
    <div id="kline" style="width: 900px;height:400px;position: relative;"></div>

    <script src="content/js/jquery.min.js"></script>
    <script src="content/js/webfont.js"></script>
    <script src='../jscommon/umychart.console.js'></script>
    <script src="../jscommon/umychart.network.js"></script>
    <script src="../jscommon/umychart.js"></script>             <!-- K線圖形 -->
    <script src="../jscommon/umychart.complier.js"></script>    <!-- 麥語言解析執行器 -->
    <script src="../jscommon/umychart.index.data.js"></script>  <!-- 基礎指標庫 -->
    <script src="../jscommon/umychart.style.js"></script>       <!-- 白色風格和黑色風格配置信息 -->
    
    <script>

        //JSConsole.Chart.Log=() =>{}
        //JSConsole.Complier.Log=()=>{}

        //行情tooltip提示信息格式
        function CustomHistoryDataStringFormat()
        {
            this.Value;     //數據
            this.Text;      //輸出字符串

            this.Symbol;
            this.UpColor="rgb(238,21,21)";          //上漲顏色
            this.DownColor="rgb(25,158,0)";         //下跌顏色
            this.UnchagneColor="rgb(0,0,0)";        //平盤

            this.VolColor="rgb(43,54,69)";       //成交量
            this.AmountColor="rgb(43,54,69)";    //成交金額
            this.LanguageID=0;                  //語言  0 中文 1 英文
            this.LineCount=0;    //一共幾行
            this.Width=157;      //寬度
            this.Height;    //高度

            this.Operator=function()    //拼div html 字符串
            {
                var data=this.Value.Data;
                if (!data) return false;

                console.log('[CustomHistoryDataStringFormat::CustomHistoryDataStringFormat] data', data);
                let WEEK_NAME=["日","一","二","三","四","五","六"];
                

                var date=new Date(parseInt(data.Date/10000),(data.Date/100%100-1),data.Date%100);
                var strDate=data.Date;                  //日期 可以根據需求自己格式化日期
                var title2=WEEK_NAME[date.getDay()];    //星期
                if (data.Time>=0) title2=data.Time;     //時間 可以根據需求自己格式化日期
                

                var defaultfloatPrecision=2;//價格小數位數
                var increase=null;
                if (data.YClose>0) increase=(data.Close-data.YClose)/data.YClose*100;
                var strText=
                    "<span class='tooltip-title'>"+strDate+"&nbsp&nbsp"+title2+"</span>"+
                    "<span class='tooltip-con'>開盤</span>"+
                    "<span class='tooltip-num' style='color:"+this.GetColor(data.Open,data.YClose)+";'>"+data.Open.toFixed(defaultfloatPrecision)+"</span><br/>"+
                    "<span class='tooltip-con'>最高</span>"+
                    "<span class='tooltip-num' style='color:"+this.GetColor(data.High,data.YClose)+";'>"+data.High.toFixed(defaultfloatPrecision)+"</span><br/>"+
                    "<span class='tooltip-con'>最低</span>"+
                    "<span class='tooltip-num' style='color:"+this.GetColor(data.Low,data.YClose)+";'>"+data.Low.toFixed(defaultfloatPrecision)+"</span><br/>"+
                    "<span class='tooltip-con'>收盤</span>"+
                    "<span class='tooltip-num' style='color:"+this.GetColor(data.Close,data.YClose)+";'>"+data.Close.toFixed(defaultfloatPrecision)+"</span><br/>"+
                    //"<span style='color:"+this.YClose+";font:微軟雅黑;font-size:12px'>&nbsp;前收: "+IFrameSplitOperator.FormatValueString(data.YClose,2)+"</span><br/>"+
                    "<span class='tooltip-con'>數量</span>"+
                    "<span class='tooltip-num' style='color:"+this.VolColor+";'>"+IFrameSplitOperator.FormatValueString(data.Vol,2,this.LanguageID)+"</span><br/>"+
                    "<span class='tooltip-con'>金額</span>"+
                    "<span class='tooltip-num' style='color:"+this.AmountColor+";'>"+IFrameSplitOperator.FormatValueString(data.Amount,2,this.LanguageID)+"</span><br/>"+
                    "<span class='tooltip-con'>漲幅</span>"+
                    (increase==null? "<span class='tooltip-num' style='color:"+this.GetColor(0,0)+";'>"+'--'+"</span><br/>" :
                    "<span class='tooltip-num' style='color:"+this.GetColor(increase,0)+";'>"+increase.toFixed(2)+'%'+"</span><br/>");

                this.LineCount=8;
                if(data.FlowCapital>0)  //股票換手率
                {
                    var value=data.Vol/data.FlowCapital*100;
                    strText+= "<span class='tooltip-con'>換手</span>"+
                    "<span class='tooltip-num' style='color:"+this.AmountColor+";'>"+value.toFixed(2)+'%'+"</span><br/>";
                    ++this.LineCount;
                }

                //顯示疊加股票名稱
                if (this.Value.ChartPaint.Name=="Overlay-KLine")
                {
                    var title="<span style='color:rgb(0,0,0);font:微軟雅黑;font-size:12px;text-align:center;display: block;'>"+this.Value.ChartPaint.Title+"</span>";
                    strText=title+strText;
                    ++this.LineCount;
                }

                //增加一個字段
                strText+="<span  class='tooltip-con' style='color:rgb(0,45,255);'>字段</span><span class='tooltip-num' style='color:rgb(0,255,255);'>888.8</span> <br/> ";
                ++this.LineCount;

                this.Text=strText;

                this.Width=157;
                this.Height=this.LineCount*25;  //每行高度25
                return true;
            }

            this.GetColor=function(price,yclse)
            {
                if(price>yclse) return this.UpColor;
                else if (price<yclse) return this.DownColor;
                else return this.UnchagneColor;
            }
        }
                
        //簡單的把K線控件封裝下
        function KLineChart(divKLine)
        {
            this.DivKLine=divKLine;
            this.Chart=JSChart.Init(divKLine);   //把K線圖綁定到一個Div上
            this.DivTitle=document.getElementById('klinetitle');

            //K線配置信息
            this.Option= {
                Type:'歷史K線圖',   //創建圖形類型
                
                Windows: //窗口指標
                [
                    {Index:"MA", Modify:false,Change:false},
                    {Index:"VOL", Modify:false,Change:false},
                ], 

                Symbol:'600000.sh',
                IsAutoUpdate:true,       //是自動更新數據
                //TradeIndex: {Index:'交易系統-BIAS'},    //交易系統
    
                IsShowRightMenu:true,          //右鍵菜單
                CorssCursorTouchEnd:true,
    
                KLine:  //K線設置
                {
                    DragMode:1,                 //拖拽模式 0 禁止拖拽 1 數據拖拽 2 區間選擇
                    Right:1,                    //復權 0 不復權 1 前復權 2 後復權
                    Period:0,                   //週期 0 日線 1 周線 2 月線 3 年線 
                    MaxReqeustDataCount:1000,   //數據個數
                    MaxRequestMinuteDayCount:10, //分鐘數據取5天
                    PageSize:50,               //一屏顯示多少數據
                    //Info:["互動易","大宗交易",'龍虎榜',"調研","業績預告","公告"],       //信息地雷
                    IsShowTooltip:true,                 //是否顯示K線提示信息
                    DrawType:0      //K線類型 0=實心K線柱子 1=收盤價線 2=美國線 3=空心K線柱子 4=收盤價面積圖
                },
    
                KLineTitle: //標題設置
                {
                    IsShowName:true,       //不顯示股票名稱
                    IsShowSettingInfo:true //不顯示週期/復權
                },
    
                Border: //邊框
                {
                    Left:5,         //左邊間距
                    Right:60,       //右邊間距
                    Bottom:25,      //底部間距
                    Top:4          //頂部間距
                },
                
                Frame:  //子框架設置
                [
                    {SplitCount:3,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false}
                ]
            };
                 
            this.Create=function()  //創建圖形
            {
                var self=this;
                $(window).resize(function() { self.OnSize(); });    //綁定窗口大小變化事件

                var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //讀取黑色風格配置
                //JSChart.SetStyle(blackStyle);
                //this.DivKLine.style.backgroundColor=blackStyle.BGColor; //設置最外面的div背景

                this.OnSize();  //讓K線全屏
                this.Chart.SetOption(this.Option);  //設置K線配置
            }

            this.OnSize=function()  //自適應大小調整
            {
                var height= $(window).height();
                var width = $(window).width();
                this.DivKLine.style.top='px';
                this.DivKLine.style.left='px';
                this.DivKLine.style.width=width+'px';
                this.DivKLine.style.height=height+'px';
                this.Chart.OnSize();
            }
        }

        $(function () 
        {
            WebFont.load({ custom: { families: ['iconfont'] } });   //預加載下iconfont資源

            //Tooltip使用自己的格式類
            JSChart.GetDivTooltipDataFormat().DataMap.set('HistoryDataStringFormat', { Create:()=> { return new CustomHistoryDataStringFormat() } } );

            var klineControl=new KLineChart(document.getElementById('kline'));
            klineControl.Create();
        })

    </script>  
</body>  
</html>



<style>

    
</style>

VUE 部分代碼

vue 需要加上空間名

 import HQChart from 'hqchart'
 .........
 HQChart.Chart.JSChart.GetDivTooltipDataFormat().DataMap.set(
 	'HistoryDataStringFormat', 
 	{ Create:()=> { return new CustomHistoryDataStringFormat() } } 
 );

內置類HistoryDataStringFormat代碼

這個是hqchart內置的HistoryDataStringFormat類的實現代碼

使用了統一的全局置域配置變量 g_JSChartResource
使用了統一的多語言配置 g_JSChartLocalization
日期和時間進行了格式化輸出

//行情tooltip提示信息格式
var WEEK_NAME=["日","一","二","三","四","五","六"];
function HistoryDataStringFormat()
{
    this.newMethod=IChangeStringFormat;   //派生
    this.newMethod();
    delete this.newMethod;

    this.Symbol;
    this.UpColor=g_JSChartResource.UpTextColor;
    this.DownColor=g_JSChartResource.DownTextColor;
    this.UnchagneColor=g_JSChartResource.UnchagneTextColor;

    this.VolColor=g_JSChartResource.DefaultTextColor;
    this.AmountColor=g_JSChartResource.DefaultTextColor;
    this.LanguageID=JSCHART_LANGUAGE_ID.LANGUAGE_CHINESE_ID;
    this.LineCount=0;    //一共幾行
    this.Width=157;     //寬度
    this.Height=25*5;     //高度

    this.Operator=function()
    {
        var data=this.Value.Data;
        if (!data) return false;

        this.Width=157;
        if (this.LanguageID==JSCHART_LANGUAGE_ID.LANGUAGE_ENGLISH_ID) this.Width=180;

        var date=new Date(parseInt(data.Date/10000),(data.Date/100%100-1),data.Date%100);
        var strDate=IFrameSplitOperator.FormatDateString(data.Date);
        var title2=g_JSChartLocalization.GetText(WEEK_NAME[date.getDay()],this.LanguageID);
        if (ChartData.IsMinutePeriod(this.Value.ChartPaint.Data.Period,true)) // 分鐘週期
        {
            title2=IFrameSplitOperator.FormatTimeString(data.Time);
        }
        else if (ChartData.IsSecondPeriod(this.Value.ChartPaint.Data.Period))
        {
            title2=IFrameSplitOperator.FormatTimeString(data.Time,'HH:MM:SS');
        }
        var defaultfloatPrecision=GetfloatPrecision(this.Symbol);//價格小數位數
        var increase=null;
        if (data.YClose>0) increase=(data.Close-data.YClose)/data.YClose*100;
        var strText=
            "<span class='tooltip-title'>"+strDate+"&nbsp&nbsp"+title2+"</span>"+
            "<span class='tooltip-con'>"+g_JSChartLocalization.GetText('DivTooltip-Open',this.LanguageID)+"</span>"+
            "<span class='tooltip-num' style='color:"+this.GetColor(data.Open,data.YClose)+";'>"+data.Open.toFixed(defaultfloatPrecision)+"</span><br/>"+
            "<span class='tooltip-con'>"+g_JSChartLocalization.GetText('DivTooltip-High',this.LanguageID)+"</span>"+
            "<span class='tooltip-num' style='color:"+this.GetColor(data.High,data.YClose)+";'>"+data.High.toFixed(defaultfloatPrecision)+"</span><br/>"+
            "<span class='tooltip-con'>"+g_JSChartLocalization.GetText('DivTooltip-Low',this.LanguageID)+"</span>"+
            "<span class='tooltip-num' style='color:"+this.GetColor(data.Low,data.YClose)+";'>"+data.Low.toFixed(defaultfloatPrecision)+"</span><br/>"+
            "<span class='tooltip-con'>"+g_JSChartLocalization.GetText('DivTooltip-Close',this.LanguageID)+"</span>"+
            "<span class='tooltip-num' style='color:"+this.GetColor(data.Close,data.YClose)+";'>"+data.Close.toFixed(defaultfloatPrecision)+"</span><br/>"+
            //"<span style='color:"+this.YClose+";font:微軟雅黑;font-size:12px'>&nbsp;前收: "+IFrameSplitOperator.FormatValueString(data.YClose,2)+"</span><br/>"+
            "<span class='tooltip-con'>"+g_JSChartLocalization.GetText('DivTooltip-Vol',this.LanguageID)+"</span>"+
            "<span class='tooltip-num' style='color:"+this.VolColor+";'>"+IFrameSplitOperator.FormatValueString(data.Vol,2,this.LanguageID)+"</span><br/>"+
            "<span class='tooltip-con'>"+g_JSChartLocalization.GetText('DivTooltip-Amount',this.LanguageID)+"</span>"+
            "<span class='tooltip-num' style='color:"+this.AmountColor+";'>"+IFrameSplitOperator.FormatValueString(data.Amount,2,this.LanguageID)+"</span><br/>"+
            "<span class='tooltip-con'>"+g_JSChartLocalization.GetText('DivTooltip-Increase',this.LanguageID)+"</span>"+
            (increase==null? "<span class='tooltip-num' style='color:"+this.GetColor(0,0)+";'>"+'--'+"</span><br/>" :
            "<span class='tooltip-num' style='color:"+this.GetColor(increase,0)+";'>"+increase.toFixed(2)+'%'+"</span><br/>");

        this.LineCount=8;
        if(MARKET_SUFFIX_NAME.IsSHSZStockA(this.Symbol) && data.FlowCapital>0)  //換手率
        {
            var value=data.Vol/data.FlowCapital*100;
            strText+= "<span class='tooltip-con'>"+g_JSChartLocalization.GetText('DivTooltip-Exchange',this.LanguageID)+"</span>"+
            "<span class='tooltip-num' style='color:"+this.AmountColor+";'>"+value.toFixed(2)+'%'+"</span><br/>";
            ++this.LineCount;
        }

        //疊加股票
        if (this.Value.ChartPaint.Name=="Overlay-KLine")
        {
            var title="<span style='color:rgb(0,0,0);font:微軟雅黑;font-size:12px;text-align:center;display: block;'>"+this.Value.ChartPaint.Title+"</span>";
            strText=title+strText;
            ++this.LineCount;
        }

        this.Text=strText;

        this.Height=this.LineCount*25;
        return true;
    }

    this.GetColor=function(price,yclse)
    {
        if(price>yclse) return this.UpColor;
        else if (price<yclse) return this.DownColor;
        else return this.UnchagneColor;
    }
}

HQChart使用教程55- 自定義PC端K線圖Tooltip

HQChart使用教程55- 自定義PC端K線圖Tooltip

效果圖

PC端Tooltip

tooltip css

數據輸出格式化類

類成員變量

this.Value

this.Text

this.Symbol

this.LineCount

this.Width

this.LanguageID

成員函數

this.Operator

掛接自己的tooltip格式化類

完整示例

VUE 部分代碼

內置類HistoryDataStringFormat代碼

《Python進階》學習筆記

Leetcode 3161. 物塊放置查詢

leetcode 60 排列序列

一個docker容器暴露多個端口

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

HQChart使用教程63-uniapp使用renderjs+hqchart(h5)

HQChart實戰教程17 -K線沙盤推演

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

HQChart實戰教程3-http+ws對接分鐘K線數據

HQChart實戰教程2-使用跨週期寫指標

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結