hqchart 1.1.15191 → 1.1.15210

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hqchart",
-  "version": "1.1.15191",
+  "version": "1.1.15210",
   "description": "HQChart - H5, 微信小程序 沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图. 分析家语法,通达信语法,(麦语法),第3方数据对接",
   "main": "lib/main.js",
   "scripts": {

package/src/jscommon/umychart.DialogDrawTool.js

@@ -167,8 +167,6 @@ function JSDialogDrawTool()
     this.AryDivChart=[];
     this.HQChart=null;
     this.LineColor='rgb(255,140,0)';
-    this.LineColorIndex=0;
-    this.RandomLineColor=["rgb(255,69,0)", "rgb(0,191,255)", "rgb(255,0,255)", "rgb(255,105,180)"];
     this.LineWidth=1*GetDevicePixelRatio();
     this.ColumnCount=5
 
@@ -179,7 +177,6 @@ function JSDialogDrawTool()
     this.Inital=function(hqchart)
     {
        this.LineColor=g_JSChartResource.DrawPicture.LineColor[0];
-       this.RandomLineColor.splice(0,0,this.LineColor);
        this.HQChart=hqchart;
     }
 
@@ -408,6 +405,13 @@ function JSDialogDrawTool()
         if (item.Type==2 && item.Data.ID==JS_DRAWTOOL_MENU_ID.CMD_CHANGE_LINE_COLOR_ID)   //颜色
         {
             spanDom.style['color']=this.LineColor;
+            var inputColor=document.createElement("input");
+            inputColor.setAttribute("type", "color");
+            inputColor.setAttribute("value", IChartDrawPicture.RGBToHex(this.LineColor));
+            inputColor.className="UMyChart_DrawTool_Input_Color";
+            inputColor.oninput=(e)=>{ this.OnChangeColor(e, data) };
+            tdDom.appendChild(inputColor);
+            data.InputColor=inputColor;
         }
         else if (item.Type==2 && item.Data.ID==JS_DRAWTOOL_MENU_ID.CMD_CROSS_PERIOD_ID)
         {
@@ -424,16 +428,20 @@ function JSDialogDrawTool()
     }
 
 
-    
-    this.OnChangeLineColor=function(data)
+    this.OnChangeColor=function(e, data)
     {
-        ++this.LineColorIndex;
-        var index=this.LineColorIndex%this.RandomLineColor.length;
-        this.LineColor=this.RandomLineColor[index];
-
+        var color=data.InputColor.value;
+        color=IChartDrawPicture.HexToRGB(color);
+        this.LineColor=color;
         data.Span.style['color']=this.LineColor;
     }
 
+    this.OnChangeLineColor=function(data)
+    {
+        data.InputColor.setAttribute("value", IChartDrawPicture.RGBToHex(this.LineColor));
+        data.InputColor.click();    //显示选色器
+    }
+
     //清空所有画图工具
     this.DeleteAllChart=function()
     {
@@ -677,24 +685,19 @@ function JSDialogModifyDraw()
     this.ModifyTextButton=null;
     this.AdvancedButton=null;
 
-    this.RandomLineColor=["rgb(255,69,0)", "rgb(173,255,47)", "rgb(238,154,73)", "rgb(255,105,180)"];               //线段颜色
-    this.RandomBGColor=["rgba(210,251,209，0.8)", "rgb(217,217,253)", "rgb(255,208,204)", "rgb(252,249,206)"];      //背景颜色
-    this.RandomFontColor=["rgb(0,0,0)", "rgb(255, 0, 0)", "rgb(20, 255, 0)", "rgb(255, 0, 255)"];                   //文字颜色
-    this.RandomBorderColor=["rgb(0,0,0)", "rgb(5, 246, 143)", "rgb(139, 137, 137)", "rgb(255, 20, 147)"];           //边框颜色
-
     this.AryButton=
     [
-        { Title:"修改线段颜色", ClassName: 'hqchart_drawtool icon-huabi', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_CHANGE_LINE_COLOR_ID }},
-        { Title:"修改字体颜色", ClassName: 'hqchart_drawtool icon-zitiyanse', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_CHANGE_FONT_COLOR_ID }},
-        { Title:"修改背景颜色", ClassName: 'hqchart_drawtool icon-zitibeijingse', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_CHANGE_BG_COLOR_ID }},
-        { Title:"修改边框颜色", ClassName: 'hqchart_drawtool icon-biankuang', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_CHANGE_BORDER_COLOR_ID }},
-        { Title:"字体放大", ClassName: 'hqchart_drawtool icon-zoomin', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_ZOOM_FONT_ID }},
-        { Title:"字体缩小", ClassName: 'hqchart_drawtool icon-zoomout', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_ZOOM_OUT_FONT_ID }},
-        { Title:"随机生成文字内容", ClassName: 'hqchart_drawtool icon-bianji', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_MODIFY_TEXT_ID }},
-        { Title:"高级设置", ClassName: 'hqchart_drawtool icon-setting', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_ADVANCED_SETTING_ID }},
+        { Title:"修改图形颜色", ClassName: 'hqchart_drawtool icon-Vector UMyChart_Draw_Modify_Dialog_Button_Color_Span', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_CHANGE_LINE_COLOR_ID }},
+        { Title:"修改字体颜色", ClassName: 'hqchart_drawtool icon-zitiyanse1 UMyChart_Draw_Modify_Dialog_Button_Color_Span ', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_CHANGE_FONT_COLOR_ID }},
+        { Title:"修改背景颜色", ClassName: 'hqchart_drawtool icon-zitibeijingse UMyChart_Draw_Modify_Dialog_Button_Color_Span', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_CHANGE_BG_COLOR_ID }},
+        { Title:"修改边框颜色", ClassName: 'hqchart_drawtool icon-biankuang UMyChart_Draw_Modify_Dialog_Button_Color_Span', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_CHANGE_BORDER_COLOR_ID }},
+        { Title:"字体放大", ClassName: 'hqchart_drawtool icon-zoomin UMyChart_Draw_Modify_Dialog_Button_Span', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_ZOOM_FONT_ID }},
+        { Title:"字体缩小", ClassName: 'hqchart_drawtool icon-zoomout UMyChart_Draw_Modify_Dialog_Button_Span', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_ZOOM_OUT_FONT_ID }},
+        { Title:"随机生成文字内容", ClassName: 'hqchart_drawtool icon-bianji UMyChart_Draw_Modify_Dialog_Button_Span', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_MODIFY_TEXT_ID }},
+        { Title:"高级设置", ClassName: 'hqchart_drawtool icon-setting UMyChart_Draw_Modify_Dialog_Button_Span', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_ADVANCED_SETTING_ID }},
 
         { Title:"上锁", ClassName: 'hqchart_drawtool icon-lock', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_LOCK_DRAW_CHART_ID }},
-        { Title:"删除图形", ClassName: 'hqchart_drawtool icon-recycle_bin', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_DELETE_DRAW_CHART_ID }},
+        { Title:"删除图形", ClassName: 'hqchart_drawtool icon-recycle_bin UMyChart_Draw_Modify_Dialog_Button_Span', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_DELETE_DRAW_CHART_ID }},
     ];
 
     this.RestoreFocusDelay=800;
@@ -750,10 +753,9 @@ function JSDialogModifyDraw()
         spanTooltip.innerText=item.Title;
         divItem.appendChild(spanTooltip);
 
-
         var spanDom=document.createElement("span");
         spanDom.className=item.ClassName;
-        spanDom.classList.add("UMyChart_Draw_Modify_Dialog_Button_Span");
+        //spanDom.classList.add("UMyChart_Draw_Modify_Dialog_Button_Span");
         divItem.appendChild(spanDom);
        
 
@@ -767,17 +769,33 @@ function JSDialogModifyDraw()
         {
             case JS_DRAWTOOL_MENU_ID.CMD_CHANGE_LINE_COLOR_ID:
                 this.ColorButton=data;
+                var divColorBar=this.CreateColorBar(data);
+                divItem.appendChild(divColorBar);
+                var inputColor=this.CreateInputColor(data);
+                divItem.appendChild(inputColor);
                 break;
             case JS_DRAWTOOL_MENU_ID.CMD_CHANGE_BG_COLOR_ID:
                 this.BGColorButton=data;
+                var divColorBar=this.CreateColorBar(data);
+                divItem.appendChild(divColorBar);
+                var inputColor=this.CreateInputColor(data);
+                divItem.appendChild(inputColor);
                 divItem.style.display="none";
                 break;
             case JS_DRAWTOOL_MENU_ID.CMD_CHANGE_FONT_COLOR_ID:
                 this.FontColorButton=data;
+                var divColorBar=this.CreateColorBar(data);
+                divItem.appendChild(divColorBar);
+                var inputColor=this.CreateInputColor(data);
+                divItem.appendChild(inputColor);
                 divItem.style.display="none";
                 break;
             case JS_DRAWTOOL_MENU_ID.CMD_CHANGE_BORDER_COLOR_ID:
                 this.BorderColorButton=data;
+                var divColorBar=this.CreateColorBar(data);
+                divItem.appendChild(divColorBar);
+                var inputColor=this.CreateInputColor(data);
+                divItem.appendChild(inputColor);
                 divItem.style.display="none";
                 break;
             case JS_DRAWTOOL_MENU_ID.CMD_LOCK_DRAW_CHART_ID:
@@ -804,6 +822,27 @@ function JSDialogModifyDraw()
         parentDivDom.appendChild(divItem);
     }
 
+    this.CreateInputColor=function(data)
+    {
+        var inputColor=document.createElement("input");
+        inputColor.setAttribute("type", "color");
+        inputColor.className="UMyChart_Draw_Modify_Input_Color";
+        data.InputColor=inputColor;
+        inputColor.oninput=(e)=>{ this.OnChangeColor(e, data) };
+       
+        return inputColor;
+    }
+
+    //颜色块
+    this.CreateColorBar=function(data)
+    {
+        var divColor=document.createElement("div");
+        divColor.className="UMyChart_Draw_Modify_Dialog_Button_ColorBar_Div";
+        data.DivColorBar=divColor;
+
+        return divColor;
+    }
+
     this.OnClickButton=function(e, data)
     {
         console.log('[JSDialogModifyDraw::OnClickButton] ', data);
@@ -813,19 +852,19 @@ function JSDialogModifyDraw()
         switch(id)
         {
             case JS_DRAWTOOL_MENU_ID.CMD_CHANGE_LINE_COLOR_ID:
-                this.ModifyLineColor();
+                this.ModifyLineColor(data);
                 break;
             case JS_DRAWTOOL_MENU_ID.CMD_DELETE_DRAW_CHART_ID:
                 this.DeleteDrawPicture();
                 break;
             case JS_DRAWTOOL_MENU_ID.CMD_CHANGE_BG_COLOR_ID:
-                this.ModifyBGColor();
+                this.ModifyBGColor(data);
                 break;
             case JS_DRAWTOOL_MENU_ID.CMD_CHANGE_FONT_COLOR_ID:
-                this.ModifyFontColor();
+                this.ModifyFontColor(data);
                 break;
             case JS_DRAWTOOL_MENU_ID.CMD_CHANGE_BORDER_COLOR_ID:
-                this.ModifyBorderColor();
+                this.ModifyBorderColor(data);
                 break;
             case JS_DRAWTOOL_MENU_ID.CMD_LOCK_DRAW_CHART_ID:
                 this.ModifyLockChart();
@@ -902,83 +941,89 @@ function JSDialogModifyDraw()
         dom.style.display=diaplay;
     }
 
-    this.GetRandomColor=function(currentColor, randomLineColor)
+    this.OnChangeColor=function(e, data)
     {
-        var colorIndex=0;
-        for(var i=0;i<randomLineColor.length;++i)
+        if (!this.ChartPicture || !this.HQChart) return;
+
+        var color=data.InputColor.value;
+        color=IChartDrawPicture.HexToRGB(color);
+
+        if (data.Item.Data.ID==JS_DRAWTOOL_MENU_ID.CMD_CHANGE_LINE_COLOR_ID)
         {
-            if (currentColor==randomLineColor[i]) 
-            {
-                colorIndex=i+1;
-                break;
-            }
-        }
+            this.ChartPicture.LineColor=color;
+            if (this.ColorButton) this.ColorButton.DivColorBar.style['background-color']=color;
+            if (this.HQChart.ChartDrawStorage) this.HQChart.ChartDrawStorage.SaveDrawData(this.ChartPicture);   //保存下
 
-        colorIndex=colorIndex%randomLineColor.length;
-        var color=randomLineColor[colorIndex];
+            this.HQChart.Draw();
+        }
+        else if (data.Item.Data.ID==JS_DRAWTOOL_MENU_ID.CMD_CHANGE_BORDER_COLOR_ID)
+        {
+            if (this.ChartPicture.ClassName=="ChartDrawNote") this.ChartPicture.NoteBorderColor=color;
+            else this.ChartPicture.BorderColor=color;
+        
+            if (this.BorderColorButton) this.BorderColorButton.DivColorBar.style['background-color']=color;
+            if (this.HQChart.ChartDrawStorage) this.HQChart.ChartDrawStorage.SaveDrawData(this.ChartPicture);   //保存下
 
-        return color;
-    }
+            this.HQChart.Draw();
+        }
+        else if (data.Item.Data.ID==JS_DRAWTOOL_MENU_ID.CMD_CHANGE_FONT_COLOR_ID)
+        {
+            if (this.ChartPicture.ClassName=="ChartDrawNote") this.ChartPicture.NoteTextColor=color;
+            else this.ChartPicture.TextColor=color;
 
-    this.ModifyLineColor=function()
-    {
-        if (!this.ChartPicture || !this.HQChart) return;
+            if (this.FontColorButton) this.FontColorButton.DivColorBar.style['background-color']=color;
+            if (this.HQChart.ChartDrawStorage) this.HQChart.ChartDrawStorage.SaveDrawData(this.ChartPicture);   //保存下
 
-        var color=this.GetRandomColor(this.ChartPicture.LineColor, this.RandomLineColor);
+            this.HQChart.Draw();
+        }
+        else if (data.Item.Data.ID==JS_DRAWTOOL_MENU_ID.CMD_CHANGE_BG_COLOR_ID)
+        {
+            color=IChartDrawPicture.ColorToRGBA(color, 0.8);
+            if (this.ChartPicture.ClassName=="ChartDrawNote") this.ChartPicture.NoteBGColor=color;
+            else this.ChartPicture.BGColor=color;
 
-        this.ChartPicture.LineColor = color;
-        this.ChartPicture.PointColor = color;
+            if (this.BGColorButton) this.BGColorButton.DivColorBar.style['background-color']=color;
+            if (this.HQChart.ChartDrawStorage) this.HQChart.ChartDrawStorage.SaveDrawData(this.ChartPicture);   //保存下
 
-        if (this.ColorButton) this.ColorButton.Span.style['color']=color;
+            this.HQChart.Draw();
+        }
+       
+    }
 
-        if (this.HQChart.ChartDrawStorage) this.HQChart.ChartDrawStorage.SaveDrawData(this.ChartPicture);   //保存下
+    this.ShowColorPicker=function(data, defaultColor)
+    {
+        if (!data.InputColor) return;
 
-        this.HQChart.Draw();
+        data.InputColor.setAttribute("value", IChartDrawPicture.RGBToHex(defaultColor));
+        data.InputColor.click();    //显示选色器
     }
 
-    this.ModifyFontColor=function()
+    this.ModifyLineColor=function(data)
     {
         if (!this.ChartPicture || !this.HQChart) return;
 
-        
-        if (this.ChartPicture.ClassName=="ChartDrawNote")
-        {
-            var color=this.GetRandomColor(this.ChartPicture.NoteTextColor, this.RandomFontColor);
-            this.ChartPicture.NoteTextColor=color;
-        }
-        else
-        {
-            var color=this.GetRandomColor(this.ChartPicture.TextColor, this.RandomFontColor);
-            this.ChartPicture.TextColor=color;
-        }
-       
-
-        if (this.FontColorButton) this.FontColorButton.Span.style['color']=color;
+        var color=this.ChartPicture.LineColor;
+        this.ShowColorPicker(data, color);
+    }
 
-        if (this.HQChart.ChartDrawStorage) this.HQChart.ChartDrawStorage.SaveDrawData(this.ChartPicture);   //保存下
+    this.ModifyFontColor=function(data)
+    {
+        if (!this.ChartPicture || !this.HQChart) return;
 
-        this.HQChart.Draw();
+        var color=this.ChartPicture.TextColor;
+        if (this.ChartPicture.ClassName=="ChartDrawNote") color=this.ChartPicture.NoteTextColor;
+        
+        this.ShowColorPicker(data, color);
     }
 
-    this.ModifyBGColor=function()
+    this.ModifyBGColor=function(data)
     {
         if (!this.ChartPicture || !this.HQChart) return;
 
-        if (this.ChartPicture.ClassName=="ChartDrawNote")
-        {
-            var color=this.GetRandomColor(this.ChartPicture.NoteBGColor, this.RandomBGColor);
-            this.ChartPicture.NoteBGColor=color;
-        }
-        else
-        {
-            var color=this.GetRandomColor(this.ChartPicture.BGColor, this.RandomBGColor);
-            this.ChartPicture.BGColor=color;
-        }
+        var color=this.ChartPicture.BGColor;
+        if (this.ChartPicture.ClassName=="ChartDrawNote") color=this.ChartPicture.NoteBGColor;
        
-        if (this.BGColorButton) this.BGColorButton.Span.style['color']=color;
-        if (this.HQChart.ChartDrawStorage) this.HQChart.ChartDrawStorage.SaveDrawData(this.ChartPicture);   //保存下
-
-        this.HQChart.Draw();
+        this.ShowColorPicker(data, color);
     }
 
     this.ModifyLockChart=function()
@@ -1005,26 +1050,14 @@ function JSDialogModifyDraw()
         }
     }
 
-    this.ModifyBorderColor=function()
+    this.ModifyBorderColor=function(data)
     {
         if (!this.ChartPicture || !this.HQChart) return;
 
-        if (this.ChartPicture.ClassName=="ChartDrawNote")
-        {
-            var color=this.GetRandomColor(this.ChartPicture.NoteBorderColor, this.RandomBorderColor);
-            this.ChartPicture.NoteBorderColor=color;
-        }
-        else
-        {
-            var color=this.GetRandomColor(this.ChartPicture.BorderColor, this.RandomBorderColor);
-            this.ChartPicture.BorderColor=color;
-        }
-        
+        var color= this.ChartPicture.BorderColor;
+        if (this.ChartPicture.ClassName=="ChartDrawNote") color=this.ChartPicture.NoteBorderColor;
        
-        if (this.BorderColorButton) this.BorderColorButton.Span.style['color']=color;
-        if (this.HQChart.ChartDrawStorage) this.HQChart.ChartDrawStorage.SaveDrawData(this.ChartPicture);   //保存下
-
-        this.HQChart.Draw();
+        this.ShowColorPicker(data, color);
     }
 
     this.ModifyFontZoom=function(step)
@@ -1151,7 +1184,7 @@ function JSDialogModifyDraw()
             this.ShowButton(item.Div, bShowLineColor?"inline":"none");
             if (bShowLineColor)
             {
-                item.Span.style['color']=chart.LineColor;
+                item.DivColorBar.style['background-color']=chart.LineColor;
             }
         }
 
@@ -1161,7 +1194,7 @@ function JSDialogModifyDraw()
             this.ShowButton(item.Div, bShowBGColor?"inline":"none");
             if (bShowBGColor)
             {
-                item.Span.style['color']=bgColor;
+                item.DivColorBar.style['background-color']=bgColor;
             }
         }
 
@@ -1171,7 +1204,7 @@ function JSDialogModifyDraw()
             this.ShowButton(item.Div, bShowFontColor?"inline":"none");
             if (bShowFontColor)
             {
-                item.Span.style['color']=fontColor;
+                item.DivColorBar.style['background-color']=fontColor;
             }
         }
 
@@ -1181,7 +1214,7 @@ function JSDialogModifyDraw()
             this.ShowButton(item.Div, bShowBorderColor?"inline":"none");
             if (bShowBorderColor)
             {
-                item.Span.style['color']=borderColor;
+                item.DivColorBar.style['background-color']=borderColor;
             }
         }
 

package/src/jscommon/umychart.js

@@ -476,6 +476,17 @@ function JSChart(divElement, bOffscreen, bCacheCanvas)
             if (IFrameSplitOperator.IsBool(item.Enable)) chart.FastSlideConfig.Enable=item.Enable;
         }
 
+        if (option.DataMove)
+        {
+            var item=option.DataMove;
+
+            var subItem=item.Touch;
+            if (subItem && IFrameSplitOperator.IsBool(subItem.EnableLR)) chart.DataMoveConfig.Touch.EnableLR=subItem.EnableLR;
+
+            var subItem=item.Mouse;
+            if (subItem && IFrameSplitOperator.IsBool(subItem.EnableLR)) chart.DataMoveConfig.Mouse.EnableLR=subItem.EnableLR;
+        }
+
         if (chart.ClassName=="KLineChartContainer")
         {
             if (!option.DragSelectRect)
@@ -3430,8 +3441,9 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                         //SecondKeyID 1=shiftKey 2=ctrlKey 3=altKey
     this.AryHotKey=[];  //热键 { KeyID:87, SecondKeyID:1, CMD:JSCHART_MENU_ID.CMD_FULLSCREEN_SUMMARY_ID, Args:null, Description:"Alt+W	全屏区间统计" },
 
-    this.FastSlideConfig={ MinDistance:500, MinSpeed:3, MaxTime:250, Enable:false };       //快速滑动配置 MinDistance=最小的距离 MinSpeed=最小速度 MaxTime=最大间隔时间(ms)
-    this.KeyboardMove={ Timer:null, Delay:100 , PressTime:500, Enable:false, Event:null };   //键盘左右移动 PressTime=长按时间
+    this.FastSlideConfig={ MinDistance:500, MinSpeed:3, MaxTime:250, Enable:false };            //快速滑动配置 MinDistance=最小的距离 MinSpeed=最小速度 MaxTime=最大间隔时间(ms)
+    this.KeyboardMove={ Timer:null, Delay:100 , PressTime:500, Enable:false, Event:null };      //键盘左右移动 PressTime=长按时间
+    this.DataMoveConfig={ Touch:{ EnableLR: true}, Mouse:{ EnableLR:true } };                   //数据移动配置
 
     this.MapEventListenerCache=new Map();   //addEventListener 监听事件 key=type:"keydown|keyup ....", value:{ Callback:, Option: }
 
@@ -4932,7 +4944,8 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         }
         else if (this.DragMode==1 || isDragSelectRect || isDragSubSelectRect)  //数据上下左右拖拽 区间选择框左右拖动
         {
-            this.OnDragMode_One({X:moveSetp, Y:moveSetpY}, e);
+            if (this.DataMoveConfig.Mouse.EnableLR)
+                this.OnDragMode_One({X:moveSetp, Y:moveSetpY}, e);
         }
     }
 
@@ -6111,18 +6124,21 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                     var oneStepWidth=this.GetMoveOneStepWidth();
                     if (moveSetp<oneStepWidth) return;
 
-                    if(this.DataMove(moveSetp,isLeft))
-                    {
-                        this.UpdataDataoffset();
-                        this.UpdatePointByCursorIndex();
-                        this.UpdateFrameMaxMin();
-                        this.ResetFrameXYSplit();
-                        this.Draw();
-                        this.OnKLinePageChange("OnTouchMove");
-                    }
-                    else
+                    if (this.DataMoveConfig.Touch.EnableLR)
                     {
-                        if (this.DragDownloadData) this.DragDownloadData();
+                        if(this.DataMove(moveSetp,isLeft))
+                        {
+                            this.UpdataDataoffset();
+                            this.UpdatePointByCursorIndex();
+                            this.UpdateFrameMaxMin();
+                            this.ResetFrameXYSplit();
+                            this.Draw();
+                            this.OnKLinePageChange("OnTouchMove");
+                        }
+                        else
+                        {
+                            if (this.DragDownloadData) this.DragDownloadData();
+                        }
                     }
 
                     drag.LastMove.X=touches[0].clientX;
@@ -10498,6 +10514,12 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
             if (IFrameSplitOperator.IsBool(frameItem.IsShowIndexTitle)) frame.IsShowIndexTitle=frameItem.IsShowIndexTitle;
             if (frameItem.ClientBGColor) frame.ClientBGColor=frameItem.ClientBGColor;
 
+            if (frameItem.Toolbar)
+            {
+                var subItem=frameItem.Toolbar.Margin;
+                if (subItem && IFrameSplitOperator.IsNumber(subItem.Right)) frame.ToolbarConfig.Margin.Right=subItem.Right;
+            }
+
             //分时图属性
             if (IFrameSplitOperator.IsBool(frameItem.CloseBeforeButton)) frameItem.IsShowCloseButton=frameItem.CloseBeforeButton;
             if (frame.YSplitOperator.RightTextConfig)   //主图右侧坐标设置
@@ -13824,6 +13846,8 @@ function AverageWidthFrame()
     this.ExportDataButton=CloneData(g_JSChartResource.Buttons.ExportData);
     this.AddIndexWindowButton=CloneData(g_JSChartResource.Buttons.AddIndexWindow);
     this.IndexHelpButton=CloneData(g_JSChartResource.Buttons.IndexHelp);
+    
+    this.ToolbarConfig={ Margin:{ Right:3 } },
 
     this.ButtonTooltip=CloneData(g_JSChartResource.Buttons.Tooltip);
 
@@ -13893,7 +13917,7 @@ function AverageWidthFrame()
         var border=this.GetBorder();
         if (this.IsHScreen)
         {
-            var y=border.Bottom-3;
+            var y=border.Bottom-this.ToolbarConfig.Margin.Right;
             var x=border.RightTitle+this.ChartBorder.TitleHeight/2;
 
             this.ToolbarCacheSize={ RToolbar:{ Right:y, Left:y }};  //相当于额 Top, Bottom
@@ -13932,7 +13956,7 @@ function AverageWidthFrame()
         }
         else
         {
-            var right=border.RightEx-3;
+            var right=border.RightEx-this.ToolbarConfig.Margin.Right;
             var left=border.Left;
             var yButton=border.Top+this.ChartBorder.TitleHeight/2;
 
@@ -66148,17 +66172,13 @@ IChartDrawPicture.ColorToRGBA=function(color,opacity)
     var reg = /^(rgb|RGB)/;
     if (reg.test(color)) 
     {
-        var strHex = "#";
-        var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");    // 把RGB的3个数值变成数组
-        // 转成16进制
-        for (var i = 0; i < colorArr.length; i++) 
-        {
-            var hex = Number(colorArr[i]).toString(16);
-            if (hex === "0")  hex += hex;
-            strHex += hex;
-        }
+        var aryColor = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");    // 把RGB的3个数值变成数组
+        var r = parseInt(aryColor[0]);
+        var g = parseInt(aryColor[1]);
+        var b = parseInt(aryColor[2]);
 
-        color=strHex;
+        var value=`rgba(${r},${g},${b},${opacity})`;
+        return value;
     }
     
     return "rgba(" + parseInt("0x" + color.slice(1, 3)) + "," + parseInt("0x" + color.slice(3, 5)) + "," + parseInt("0x" + color.slice(5, 7)) + "," + opacity + ")";
@@ -66169,7 +66189,8 @@ IChartDrawPicture.RGBToHex=function(rgb)
     // Choose correct separator
     let sep = rgb.indexOf(",") > -1 ? "," : " ";
     // Turn "rgb(r,g,b)" into [r,g,b]
-    rgb = rgb.substr(4).split(")")[0].split(sep);
+    if (rgb.includes("rgba(") || rgb.includes("RGBA(")) rgb = rgb.substr(5).split(")")[0].split(sep);
+    else rgb = rgb.substr(4).split(")")[0].split(sep);
   
     let r = (+rgb[0]).toString(16),
         g = (+rgb[1]).toString(16),
@@ -88250,12 +88271,13 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
         if (this.ChartDrawStorage)
         {
             this.ChartDrawStorageCache=this.ChartDrawStorage.GetDrawData( {Symbol:this.Symbol, Period:this.Period} );
-            var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_LOAD_DRAWPICTURE);
-            if (event && event.Callback)
-            {
-                var sendData={ Symbol:this.Symbol, Period:this.Period, DrawStorage:this.ChartDrawStorage, ChartDrawStorageCache:this.ChartDrawStorageCache };
-                event.Callback(event,sendData,this);
-            }
+        }
+
+        var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_LOAD_DRAWPICTURE);
+        if (event && event.Callback)
+        {
+            var sendData={ Symbol:this.Symbol, Period:this.Period, DrawStorage:this.ChartDrawStorage, ChartDrawStorageCache:this.ChartDrawStorageCache };
+            event.Callback(event,sendData,this);
         }
     }
 
@@ -96105,6 +96127,13 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
         {
             this.ChartDrawStorageCache=this.ChartDrawStorage.GetDrawData( { Symbol:this.Symbol, Period:888888888 } );
         }
+
+        var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_LOAD_DRAWPICTURE);
+        if (event && event.Callback)
+        {
+            var sendData={ Symbol:this.Symbol, Period:888888888, DrawStorage:this.ChartDrawStorage, ChartDrawStorageCache:this.ChartDrawStorageCache };
+            event.Callback(event,sendData,this);
+        }
     }
 
     this.CreateChartDrawPictureByStorage=function() //把缓存(this.ChartDrawStorageCache) 画图工具创建出来