HQChart使用教程61-畫圖工具接口使用教程

畫圖工具

什麼是畫圖工具呢，就是可以在K線上通過鼠標或手勢手動繪製出線段，圓，圖標等圖形。
和一般的繪圖工具不同，繪製的圖形線段數據回和當前的股票K線圖的數據幫點，當K線縮小或放大的時候，繪製的圖形也會相應的放大縮小。

效果圖

這裏我就給手機端的樣例吧， Pc端的需要自己用dom做個工具條就可以。
豎屏頁面地址：https://opensource2.zealink.com/hqweb/demo/phone31.html
橫屏頁面地址：https://opensource2.zealink.com/hqweb/demo/phone32.html

接口說明

選中圖形事件

事件註冊回調詳見：HQChart使用教程5- K線圖控件操作函數說明

事件ID: JSCHART_EVENT_ID.ON_CLICK_DRAWPICTURE
當手勢或鼠標點中圖形的時候回觸發這個事件回調

this.Chart.AddEventCallback( {
     event:JSCHART_EVENT_ID.ON_CLICK_DRAWPICTURE, 
     callback:(event,data,obj)=>{ this.OnClickDrawPicture(event,data,obj); }
});

 this.OnClickDrawPicture=function(event,data,obj)
 {
     console.log('[KLineChart::OnClickDrawPicture] data', data);
 }

回調函數參數
event：註冊的事件信息
data ：數據 { DrawPicture:繪製圖形的實例 } 圖形的座標信息都可以從這裏取到
obj：hqchart實例

完成圖形繪製事件

事件ID： JSCHART_EVENT_ID.ON_FINISH_DRAWPICTURE
當圖形繪製完成以後回觸發這個回調事件

this.Chart.AddEventCallback( {
     event:JSCHART_EVENT_ID.ON_FINISH_DRAWPICTURE, 
     callback:(event,data,obj)=>{ this.OnFinishDrawPicture(event,data,obj); }
});

this.OnFinishDrawPicture=function(event,data,obj)
{
     console.log('[KLineChart::OnFinishDrawPicture] data', data);
}

回調函數參數
event：註冊的事件信息
data ：數據 { DrawPicture:繪製圖形的實例 } 圖形的座標信息都可以從這裏取到
obj：hqchart實例

創建一個圖形

CreateChartDrawPicture=function(name,option)
name:圖形的名稱
option:(可選），不填使用默認的
{
LineColor:’#4169E1’, //線段顏色
LineWidth:3, //線段寬度
PointColor:‘rgb(255,130,71)’ //選中點顏色
}
創建完成以後就可以在K線圖上使用鼠標或手勢繪製圖形
目前支持的圖形有

case "線段":              
case "射線":     
case '水平線':
case '趨勢線':
case "矩形":
case "圓弧線":
case 'M頭W底':
case '平行線':
case '平行通道':
case '價格通道線':
case '文本':
case '江恩角度線':
case '阻速線':
case '黃金分割':
case '百分比線':
case '波段線':
case '三角形':
case '對稱角度':
case '圓':
case '平行四邊形':
case '斐波那契週期線':
default:
  //iconfont 圖標
}

<div>
   <span class='line1'>線段</span>
    ..........
</div>

.........
 //按鈕事件綁定到創建圖形函數
 $(".line1").click(function() { klineControl.CreateDrawPciture('線段', "line1");} );
.........

this.CreateDrawPciture=function(name, tagName)
{
    this.TagName=tagName;
    document.getElementsByClassName( this.TagName)[0].style.color='rgb(255,0,0)';//改成選中狀態
    //TODO:把其他按鈕顏色清空
    this.Chart.CreateChartDrawPicture(name); //創建圖形
}

刪除圖形

ClearChartDrawPicture=function(drawPicture)
drawPicture：圖形實例，可以通過點擊圖形回調事件中獲取選中的圖形，然後刪除
如果不填，刪除所有的圖形

開始/結束畫圖（手機端用）

SetChartDrawOption=function(option)
option:
{
IsLockScreen：鎖住當前屏幕 true/false, 鎖屏以後當前K線就不能放大拖拽了，這樣方便手機端繪圖
Zoom: 畫圖點選中區域放大倍數，這樣可以方便手機端上的手勢選中，默認是1
}

畫圖保存

繪製的圖形可以保存到緩存中，下次打開這個股票的時候直接就可以記載顯示。
在setoption裏面設置一個緩存的key 就可以。

this.Option= 
{
   Type:'歷史K線圖',   //創建圖形類型
   ......
   DrawTool:       //畫圖工具
   {
        StorageKey:'4E7EA133-D6C8-4776-9869-1DDDCC5FA744'
    }
}

注意

有些圖形目前還不支持橫屏，如果你們用到了可以去羣裏反應，我回給你們加上，如果沒人用我就先不支持。畢竟只有我1個人在維護，精力有限。

如果還有問題或新的需求可以加交流QQ羣: 950092318

完成代碼

這裏我就貼一個手機端豎屏的代碼，其他的可以去打開網頁f12就可以看到

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>手機端畫圖工具</title>  
    <!-- 加載資源 -->
    <link rel="stylesheet" href="content/css/tools.css" />
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>  
<body>

    <div>
        <span id='klinedraw'>開始畫圖</span>
        <span id='klinedraw2'>完成畫圖</span>
    </div>
    <div>
        <span class='line1'>線段</span>
        <span class='line2'>射線</span>
        <span class='line3'>水平線</span>
        <span class='line4'>趨勢線</span>
        <span class='line5'>矩形</span>
        <span class='line6'>圓弧線</span>
        <span class='line7'>M頭W底</span>
        <span class='line8'>黃金分割</span>
    </div>
    <div>
        <span class='line9'>波段線</span>
        <span class='line10'>斐波那契週期線</span>
        <span class='line11'>上漲</span>
        <span class='line12'>下跌</span>
        <span class='line13'>左邊</span>
        <span class='line14'>右邊</span>
    </div>

    <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.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>       <!-- 白色風格和黑色風格配置信息 -->
    <!-- 引入vConsole的JS庫 -->
    <script src="../vConsole-3.2.0/dist/vconsole.min.js"></script>
    
    <script>

        //var vConsole = new VConsole();
        //console.log('create VConsole');

        //簡單的把K線控件封裝下
        function KLineChart(divKLine)
        {
            this.DivKLine=divKLine;

            //K線配置信息
            this.Option= {
                Type:'歷史K線圖',   //創建圖形類型
                
                Windows: //窗口指標
                [
                    {Index:"MA", Modify:false,Change:false,IsDrawTitleBG:true},
                    {Index:"VOL", Modify:false,Change:false,IsDrawTitleBG:true},
                    {Index:"RSI", Modify:false,Change:false,IsDrawTitleBG:true}, 
                ], 
                
                Symbol:'600000.sh',
                IsAutoUpdate:true,       //是自動更新數據
                IsShowRightMenu:false,          //右鍵菜單
                CorssCursorTouchEnd:true,
                EnableScrollUpDown:true,
                IsClickShowCorssCursor:true,
    
                KLine:  //K線設置
                {
                    DragMode:1,                 //拖拽模式 0=禁止拖拽 1=數據拖拽 2=區間選擇 3=點擊模式
                    Right:1,                    //復權 0 不復權 1 前復權 2 後復權
                    Period:5,                   //週期 0 日線 1 周線 2 月線 3 年線 
                    MaxReqeustDataCount:1000,   //數據個數
                    MaxRequestMinuteDayCount:10, //分鐘數據取5天
                    PageSize:50,               //一屏顯示多少數據
                    //Info:["互動易","大宗交易",'龍虎榜',"調研","業績預告","公告"],       //信息地雷
                    IsShowTooltip:false,                 //是否顯示K線提示信息
                },
    
                KLineTitle: //標題設置
                {
                    IsShowName:true,       //不顯示股票名稱
                    IsShowSettingInfo:true //不顯示週期/復權
                },
    
                Border: //邊框
                {
                    Left:5,         //左邊間距
                    Right:50,       //右邊間距
                    Bottom:25,      //底部間距
                    Top:25          //頂部間距
                },
                
                Frame:  //子框架設置
                [
                    {SplitCount:3,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false}
                ],

                ExtendChart:    //擴展圖形
                [
                    {Name:'KLineTooltip' }  //手機端tooltip
                ],

                DrawTool:       //畫圖工具
                {
                    StorageKey:'4E7EA133-D6C8-4776-9869-1DDDCC5FA744'
                }
            };
                 
            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=JSChart.Init(this.DivKLine);     //把K線圖綁定到一個Div上
                this.Chart.SetOption(this.Option);          //設置K線配置

                //選中圖形事件
                this.Chart.AddEventCallback( {
                    event:JSCHART_EVENT_ID.ON_CLICK_DRAWPICTURE, 
                    callback:(event,data,obj)=>{ this.OnClickDrawPicture(event,data,obj); }
                });

                //完成圖形事件
                this.Chart.AddEventCallback( {
                    event:JSCHART_EVENT_ID.ON_FINISH_DRAWPICTURE, 
                    callback:(event,data,obj)=>{ this.OnFinishDrawPicture(event,data,obj); }
                });

                this.Chart.AddEventCallback( {
                    event:JSCHART_EVENT_ID.ON_CLICK_INDEXTITLE, 
                    callback:(event,data,obj)=> { this.OnClickIndexTitle(event,data,obj);}
                });
            }

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

            this.OnClickDrawPicture=function(event,data,obj)
            {
                console.log('[KLineChart::OnClickDrawPicture] data', data);
            }
            
            this.OnFinishDrawPicture=function(event,data,obj)
            {
                console.log('[KLineChart::OnFinishDrawPicture] data', data);
                document.getElementsByClassName(this.TagName)[0].style.color='rgb(0,0,0)';
            }

            this.OnClickIndexTitle=function(event,data,obj)
            {
                console.log('[KLineChart::OnClickIndexTitle] data', data);
            }

            this.TagName;
            this.CreateDrawPciture=function(name, tagName)
            {
                this.TagName=tagName;
                document.getElementsByClassName( this.TagName)[0].style.color='rgb(255,0,0)';
                //TODO:把其他按鈕顏色清空

                var drawOption=
                {
                    LineColor:'#4169E1',    //線段顏色
                    LineWidth:3,            //線段寬度
                    PointColor:'rgb(255,130,71)'    //點顏色
                };

                this.Chart.CreateChartDrawPicture(name,drawOption);
            }

            this.StartDraw=function()
            {
                this.Chart.SetChartDrawOption({IsLockScreen:true, Zoom:35});    //手機端使用鎖屏模式
            }

            this.StopDraw=function()
            {
                this.Chart.SetChartDrawOption({IsLockScreen:false, Zoom:1});    //手機端取消鎖屏模式
            }
        }

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

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

            $(".line1").click(function() { klineControl.CreateDrawPciture('線段', "line1");} );
            $(".line2").click(function() { klineControl.CreateDrawPciture('射線',"line2")} );
            $(".line3").click(function() { klineControl.CreateDrawPciture('水平線',"line3")} );
            $(".line4").click(function() { klineControl.CreateDrawPciture('趨勢線', "line4")} );
            $(".line5").click(function() { klineControl.CreateDrawPciture('矩形', "line5")} );
            $(".line6").click(function() { klineControl.CreateDrawPciture('圓弧線', "line6")} );
            $(".line7").click(function() { klineControl.CreateDrawPciture('M頭W底', "line7")} );
            $(".line8").click(function() { klineControl.CreateDrawPciture('黃金分割', "line8")} );
            $(".line9").click(function() { klineControl.CreateDrawPciture('波段線', "line9")} );
            $(".line10").click(function() { klineControl.CreateDrawPciture('斐波那契週期線', "line10")} );
            $(".line11").click(function() { klineControl.CreateDrawPciture('icon-arrow_up', "line11")} );
            $(".line12").click(function() { klineControl.CreateDrawPciture('icon-arrow_down', "line12")} );
            $(".line13").click(function() { klineControl.CreateDrawPciture('icon-arrow_right', "line13")} );
            $(".line14").click(function() { klineControl.CreateDrawPciture('icon-arrow_left', "line14")} );

            $("#klinedraw").click(function() { klineControl.StartDraw()} );
            $("#klinedraw2").click(function() { klineControl.StopDraw()} );
        })

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

HQChart代碼地址

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

如果教程或hqchart對你有幫助，請在git上star，教程點下贊。謝謝~~

HQChart使用教程61-畫圖工具接口使用教程

HQChart使用教程61-畫圖工具接口使用教程

畫圖工具

效果圖

接口說明

選中圖形事件

完成圖形繪製事件

創建一個圖形

刪除圖形

開始/結束畫圖（手機端用）

畫圖保存

注意

完成代碼

HQChart代碼地址

如果教程或hqchart對你有幫助，請在git上star，教程點下贊。謝謝~~

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

GPT-4o 引領人機交互新風向，向量數據庫賽道沸騰了

企業大模型如何成爲自己數據的“百科全書”？

本地SSL證書過期輸入命令在IIS自動生成

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（二）使用kube-vip實現集羣VIP訪問

.NET週刊【5月第2期 2024-05-12】

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以太網驅動總結

HQChart使用教程61-畫圖工具接口使用教程

HQChart使用教程61-畫圖工具接口使用教程

畫圖工具

效果圖

接口說明

選中圖形事件

完成圖形繪製事件

創建一個圖形

刪除圖形

開始/結束畫圖（手機端用）

畫圖保存

注意

完成代碼

HQChart代碼地址

如果教程或hqchart對你有幫助， 請在git上star，教程點下贊 。謝謝~~

如果教程或hqchart對你有幫助，請在git上star，教程點下贊。謝謝~~