hqchart 1.1.13364 → 1.1.13370
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/umychart.vue.js +34 -45
- package/package.json +1 -1
- package/src/jscommon/umychart.DialogDrawTool.js +1 -0
- package/src/jscommon/umychart.js +363 -65
- package/src/jscommon/umychart.resource/font/drawtool/demo_index.html +26 -3
- package/src/jscommon/umychart.resource/font/drawtool/iconfont.css +7 -3
- package/src/jscommon/umychart.resource/font/drawtool/iconfont.js +1 -1
- package/src/jscommon/umychart.resource/font/drawtool/iconfont.json +7 -0
- package/src/jscommon/umychart.resource/font/drawtool/iconfont.ttf +0 -0
- package/src/jscommon/umychart.resource/font/drawtool/iconfont.woff +0 -0
- package/src/jscommon/umychart.resource/font/drawtool/iconfont.woff2 +0 -0
- package/src/jscommon/umychart.uniapp.h5/umychart.uniapp.h5.js +364 -66
- package/src/jscommon/umychart.version.js +1 -1
- package/src/jscommon/umychart.vue/umychart.vue.js +365 -66
package/src/jscommon/umychart.js
CHANGED
|
@@ -11795,6 +11795,8 @@ function AverageWidthFrame()
|
|
|
11795
11795
|
|
|
11796
11796
|
this.Canvas.font=this.DrawPicture.Font;
|
|
11797
11797
|
var fontHeight=this.GetFontHeight();
|
|
11798
|
+
this.Canvas.textAlign="left";
|
|
11799
|
+
this.Canvas.textBaseline = "bottom";
|
|
11798
11800
|
|
|
11799
11801
|
if (range.X)
|
|
11800
11802
|
{
|
|
@@ -15207,6 +15209,7 @@ function KLineFrame()
|
|
|
15207
15209
|
if (this.BeforeDrawXYCallback) this.BeforeDrawXYCallback(this);
|
|
15208
15210
|
|
|
15209
15211
|
this.DrawTitleBG();
|
|
15212
|
+
this.DrawCustomHorizontalArea(); //Y轴背景区域 在刻度前面绘制
|
|
15210
15213
|
this.DrawHorizontal();
|
|
15211
15214
|
this.DrawVertical();
|
|
15212
15215
|
}
|
|
@@ -15999,13 +16002,24 @@ function KLineFrame()
|
|
|
15999
16002
|
case 4: //叠加K线涨幅刻度
|
|
16000
16003
|
this.DrawCustomItem(item, mapTextRect);
|
|
16001
16004
|
break;
|
|
16002
|
-
case 5:
|
|
16003
|
-
this.DrawCustomAreaItem(item);
|
|
16004
|
-
break;
|
|
16005
16005
|
}
|
|
16006
16006
|
}
|
|
16007
16007
|
}
|
|
16008
16008
|
|
|
16009
|
+
//Y轴面积背景
|
|
16010
|
+
this.DrawCustomHorizontalArea=function()
|
|
16011
|
+
{
|
|
16012
|
+
if (this.IsMinSize) return;
|
|
16013
|
+
if (this.ChartBorder.IsShowTitleOnly) return;
|
|
16014
|
+
if (!IFrameSplitOperator.IsNonEmptyArray(this.CustomHorizontalInfo)) return;
|
|
16015
|
+
|
|
16016
|
+
for(var i=0;i<this.CustomHorizontalInfo.length;++i)
|
|
16017
|
+
{
|
|
16018
|
+
var item=this.CustomHorizontalInfo[i];
|
|
16019
|
+
if (item.Type==5) this.DrawCustomAreaItem(item);
|
|
16020
|
+
}
|
|
16021
|
+
}
|
|
16022
|
+
|
|
16009
16023
|
this.DrawCustomVerticalItem=function(item)
|
|
16010
16024
|
{
|
|
16011
16025
|
this.Canvas.save();
|
|
@@ -18632,7 +18646,14 @@ function HQTradeFrame()
|
|
|
18632
18646
|
if (!drawPicture.GetXYCoordinate) return false;
|
|
18633
18647
|
|
|
18634
18648
|
var range=drawPicture.GetXYCoordinate();
|
|
18635
|
-
|
|
18649
|
+
if (range && range.IsShowYCoordinate===false) //隐藏Y轴刻度信息
|
|
18650
|
+
{
|
|
18651
|
+
|
|
18652
|
+
}
|
|
18653
|
+
else
|
|
18654
|
+
{
|
|
18655
|
+
drawPicture.Frame.DrawPictureYCoordinate(drawPicture, range, option);
|
|
18656
|
+
}
|
|
18636
18657
|
|
|
18637
18658
|
for(var i=0;i<this.SubFrame.length;++i)
|
|
18638
18659
|
{
|
|
@@ -55707,6 +55728,7 @@ IChartDrawPicture.ArrayDrawPricture=
|
|
|
55707
55728
|
{ Name:"射线", ClassName:'ChartDrawPictureHaflLine', Create:function() { return new ChartDrawPictureHaflLine(); } },
|
|
55708
55729
|
{ Name:"箭头", ClassName:"ChartDrawArrowLine", Create:function() { return new ChartDrawArrowLine(); } },
|
|
55709
55730
|
{ Name:"水平线", ClassName:'ChartDrawPictureHorizontalLine', Create:function() { return new ChartDrawPictureHorizontalLine(); }},
|
|
55731
|
+
{ Name:"水平射线", ClassName:"ChartDrawPictureHorizontalRay", Create:function() { return new ChartDrawPictureHorizontalRay(); }},
|
|
55710
55732
|
{ Name:"趋势线", ClassName:'ChartDrawPictureTrendLine', Create:function() { return new ChartDrawPictureTrendLine(); }},
|
|
55711
55733
|
{ Name:"矩形", ClassName:'ChartDrawPictureRect', Create:function() { return new ChartDrawPictureRect(); }},
|
|
55712
55734
|
{ Name:"圆弧线", ClassName:'ChartDrawPictureArc', Create:function() { return new ChartDrawPictureArc(); }},
|
|
@@ -56383,17 +56405,67 @@ function ChartDrawPictureHorizontalLine()
|
|
|
56383
56405
|
this.newMethod();
|
|
56384
56406
|
delete this.newMethod;
|
|
56385
56407
|
|
|
56408
|
+
this.ClassName='ChartDrawPictureHorizontalLine';
|
|
56409
|
+
this.PointCount=1;
|
|
56410
|
+
this.IsPointIn=this.IsPointIn_XYValue_Line;
|
|
56411
|
+
this.IsDrawFirst=true;
|
|
56412
|
+
this.LineWidth=1;
|
|
56386
56413
|
this.Super_SetOption=this.SetOption; //父类函数
|
|
56387
56414
|
this.Super_ExportStorageData=this.ExportStorageData;
|
|
56388
56415
|
|
|
56389
|
-
this.
|
|
56416
|
+
this.LabelConfig=
|
|
56417
|
+
{
|
|
56418
|
+
Left:{ IsShow:true, Margin:{ Left:5, Top:4, Bottom:2, Right:5 } },
|
|
56419
|
+
Right:{ IsShow:true, Margin:{ Left:5, Top:4, Bottom:2, Right:5 } },
|
|
56420
|
+
Font:`${12*GetDevicePixelRatio()}px 微软雅黑`, TextColor:"rgb(255,255,255)"
|
|
56421
|
+
};
|
|
56422
|
+
|
|
56423
|
+
this.InsideLabelConfig=
|
|
56424
|
+
{
|
|
56425
|
+
Position:0, //0=左, 1=右
|
|
56426
|
+
Font:`${14*GetDevicePixelRatio()}px 微软雅黑`,
|
|
56427
|
+
Margin:{ Left:5, Top:4, Bottom:2, Right:5 },
|
|
56428
|
+
TextColor:"rgb(255,255,255)",
|
|
56429
|
+
BGAlpha:0.8, //背景色透明度
|
|
56430
|
+
}
|
|
56431
|
+
|
|
56432
|
+
this.LabelTitle;
|
|
56390
56433
|
|
|
56391
56434
|
this.SetOption=function(option)
|
|
56392
56435
|
{
|
|
56393
56436
|
if (this.Super_SetOption) this.Super_SetOption(option);
|
|
56394
56437
|
if (option)
|
|
56395
56438
|
{
|
|
56396
|
-
if (option.
|
|
56439
|
+
if (option.LabelTitle) this.LabelTitle=option.LabelTitle;
|
|
56440
|
+
|
|
56441
|
+
if (option.Label)
|
|
56442
|
+
{
|
|
56443
|
+
var item=option.Label;
|
|
56444
|
+
if (item.Left)
|
|
56445
|
+
{
|
|
56446
|
+
var subItem=item.Left;
|
|
56447
|
+
if (IFrameSplitOperator.IsBool(subItem.IsShow)) this.LabelConfig.Left.IsShow=subItem.IsShow;
|
|
56448
|
+
}
|
|
56449
|
+
|
|
56450
|
+
|
|
56451
|
+
if (item.Right)
|
|
56452
|
+
{
|
|
56453
|
+
var subItem=item.Right;
|
|
56454
|
+
if (IFrameSplitOperator.IsBool(subItem.IsShow)) this.LabelConfig.Right.IsShow=subItem.IsShow;
|
|
56455
|
+
}
|
|
56456
|
+
|
|
56457
|
+
if (item.Font) this.LabelConfig.Font=item.Font;
|
|
56458
|
+
if (item.TextColor) this.LabelConfig.FoTextColornt=item.TextColor;
|
|
56459
|
+
}
|
|
56460
|
+
|
|
56461
|
+
if (option.InsideLabel)
|
|
56462
|
+
{
|
|
56463
|
+
var item=option.InsideLabel;
|
|
56464
|
+
if (item.Font) this.InsideLabelConfig.Font=item.Font;
|
|
56465
|
+
if (item.TextColor) this.InsideLabelConfig.TextColor=item.TextColor;
|
|
56466
|
+
if (IFrameSplitOperator.IsNumber(item.Position)) this.InsideLabelConfig.Position=item.Position;
|
|
56467
|
+
if (IFrameSplitOperator.IsNumber(item.BGAlpha)) this.InsideLabelConfig.BGAlpha=item.BGAlpha;
|
|
56468
|
+
}
|
|
56397
56469
|
}
|
|
56398
56470
|
}
|
|
56399
56471
|
|
|
@@ -56403,17 +56475,13 @@ function ChartDrawPictureHorizontalLine()
|
|
|
56403
56475
|
if (this.Super_ExportStorageData)
|
|
56404
56476
|
{
|
|
56405
56477
|
storageData=this.Super_ExportStorageData();
|
|
56406
|
-
if (this.
|
|
56478
|
+
if (this.LabelTitle) storageData.LabelTitle=this.LabelTitle;
|
|
56407
56479
|
}
|
|
56408
56480
|
|
|
56409
56481
|
return storageData;
|
|
56410
56482
|
}
|
|
56411
56483
|
|
|
56412
|
-
|
|
56413
|
-
this.ClassName='ChartDrawPictureHorizontalLine';
|
|
56414
|
-
this.IsPointIn=this.IsPointIn_XYValue_Line;
|
|
56415
|
-
this.Font=16*GetDevicePixelRatio() +"px 微软雅黑";
|
|
56416
|
-
|
|
56484
|
+
/*
|
|
56417
56485
|
this.GetXYCoordinate=function()
|
|
56418
56486
|
{
|
|
56419
56487
|
if (this.IsFrameMinSize()) return null;
|
|
@@ -56421,6 +56489,7 @@ function ChartDrawPictureHorizontalLine()
|
|
|
56421
56489
|
|
|
56422
56490
|
return this.PointRange(drawPoint);
|
|
56423
56491
|
}
|
|
56492
|
+
*/
|
|
56424
56493
|
|
|
56425
56494
|
this.Draw=function()
|
|
56426
56495
|
{
|
|
@@ -56454,8 +56523,9 @@ function ChartDrawPictureHorizontalLine()
|
|
|
56454
56523
|
}
|
|
56455
56524
|
else
|
|
56456
56525
|
{
|
|
56457
|
-
this.
|
|
56458
|
-
this.Canvas.
|
|
56526
|
+
var yFixed=ToFixedPoint2(this.LineWidth,drawPoint[0].Y);
|
|
56527
|
+
this.Canvas.moveTo(left,yFixed);
|
|
56528
|
+
this.Canvas.lineTo(right,yFixed);
|
|
56459
56529
|
}
|
|
56460
56530
|
this.Canvas.stroke();
|
|
56461
56531
|
this.RestoreLineWidth();
|
|
@@ -56481,89 +56551,317 @@ function ChartDrawPictureHorizontalLine()
|
|
|
56481
56551
|
this.DrawPoint(drawPoint);
|
|
56482
56552
|
|
|
56483
56553
|
//显示价格
|
|
56484
|
-
this.
|
|
56485
|
-
|
|
56486
|
-
this.Canvas.
|
|
56487
|
-
|
|
56488
|
-
|
|
56554
|
+
this.DrawInsideLabel(drawPoint[0])
|
|
56555
|
+
|
|
56556
|
+
this.Canvas.restore();
|
|
56557
|
+
|
|
56558
|
+
this.DrawValueLabel(drawPoint[0]);
|
|
56559
|
+
}
|
|
56560
|
+
|
|
56561
|
+
this.DrawValueLabel=function(point)
|
|
56562
|
+
{
|
|
56563
|
+
if (!point) return;
|
|
56564
|
+
if (this.Frame.IsHScreen) return; //不支持横屏
|
|
56565
|
+
|
|
56566
|
+
var y=point.Y;
|
|
56567
|
+
var yValue=this.Frame.GetYData(y);
|
|
56568
|
+
var text=yValue.toFixed(2);
|
|
56569
|
+
|
|
56570
|
+
var border=this.Frame.GetBorder();
|
|
56571
|
+
var config=this.LabelConfig;
|
|
56572
|
+
|
|
56573
|
+
this.Canvas.font=config.Font;
|
|
56574
|
+
var textHeight=this.Canvas.measureText("擎").width;
|
|
56575
|
+
var textWidth=this.Canvas.measureText(text).width;
|
|
56576
|
+
|
|
56577
|
+
if (config.Left.IsShow && this.Frame.ChartBorder.Left>5)
|
|
56489
56578
|
{
|
|
56579
|
+
var margin=config.Left.Margin;
|
|
56580
|
+
var rtBG={ Right:border.Left-1, Height:textHeight+margin.Top+margin.Bottom, Width:textWidth+margin.Left+margin.Right };
|
|
56581
|
+
rtBG.Top=y-textHeight/2-margin.Top;
|
|
56582
|
+
rtBG.Bottom=rtBG.Top+rtBG.Height;
|
|
56583
|
+
rtBG.Left=rtBG.Right-rtBG.Width;
|
|
56584
|
+
|
|
56585
|
+
this.Canvas.fillStyle=this.LineColor;
|
|
56586
|
+
this.Canvas.fillRect(rtBG.Left, rtBG.Top, rtBG.Width, rtBG.Height);
|
|
56587
|
+
|
|
56490
56588
|
this.Canvas.textAlign="left";
|
|
56491
|
-
this.Canvas.textBaseline="
|
|
56492
|
-
var xText=
|
|
56493
|
-
var yText=
|
|
56494
|
-
this.Canvas.
|
|
56495
|
-
this.Canvas.
|
|
56496
|
-
var yValue=this.Frame.GetYData(drawPoint[0].X);
|
|
56497
|
-
var text=yValue.toFixed(2);
|
|
56498
|
-
if (this.Label)
|
|
56499
|
-
{
|
|
56500
|
-
if (this.Label.Position==0) text=this.Label.Text+yValue.toFixed(2);
|
|
56501
|
-
else if (this.Label.Position==1) text=yValue.toFixed(2)+this.Label.Text;
|
|
56502
|
-
}
|
|
56503
|
-
this.Canvas.fillText(text,0,0);
|
|
56589
|
+
this.Canvas.textBaseline = "top";
|
|
56590
|
+
var xText=rtBG.Left+margin.Left;
|
|
56591
|
+
var yText=rtBG.Top+margin.Top;
|
|
56592
|
+
this.Canvas.fillStyle=config.TextColor;
|
|
56593
|
+
this.Canvas.fillText(text,xText,yText);
|
|
56504
56594
|
}
|
|
56505
|
-
|
|
56595
|
+
|
|
56596
|
+
if (config.Right.IsShow && this.Frame.ChartBorder.Right>5)
|
|
56506
56597
|
{
|
|
56598
|
+
var margin=config.Right.Margin;
|
|
56599
|
+
var rtBG={ Left:border.Right+1, Height:textHeight+margin.Top+margin.Bottom, Width:textWidth+margin.Left+margin.Right };
|
|
56600
|
+
rtBG.Top=y-textHeight/2-margin.Top;
|
|
56601
|
+
rtBG.Bottom=rtBG.Top+rtBG.Height;
|
|
56602
|
+
rtBG.Right=rtBG.Left+rtBG.Width;
|
|
56603
|
+
this.Canvas.fillStyle=this.LineColor;
|
|
56604
|
+
this.Canvas.fillRect(rtBG.Left, rtBG.Top, rtBG.Width, rtBG.Height);
|
|
56605
|
+
|
|
56507
56606
|
this.Canvas.textAlign="left";
|
|
56508
|
-
this.Canvas.textBaseline="
|
|
56509
|
-
var
|
|
56510
|
-
var
|
|
56511
|
-
|
|
56512
|
-
|
|
56513
|
-
if (this.Label.Position==0) text=this.Label.Text+yValue.toFixed(2);
|
|
56514
|
-
else if (this.Label.Position==1) text=yValue.toFixed(2)+this.Label.Text;
|
|
56515
|
-
}
|
|
56516
|
-
this.Canvas.fillText(text,left,drawPoint[0].Y);
|
|
56607
|
+
this.Canvas.textBaseline = "top";
|
|
56608
|
+
var xText=rtBG.Left+margin.Left;
|
|
56609
|
+
var yText=rtBG.Top+margin.Top;
|
|
56610
|
+
this.Canvas.fillStyle=config.TextColor;
|
|
56611
|
+
this.Canvas.fillText(text,xText,yText);
|
|
56517
56612
|
}
|
|
56518
|
-
*/
|
|
56519
|
-
|
|
56520
|
-
this.Canvas.restore();
|
|
56521
56613
|
}
|
|
56522
56614
|
|
|
56523
|
-
this.
|
|
56615
|
+
this.DrawInsideLabel=function(point)
|
|
56524
56616
|
{
|
|
56525
56617
|
if (!point) return;
|
|
56526
56618
|
|
|
56527
56619
|
var isHScreen=this.Frame.IsHScreen;
|
|
56528
|
-
var
|
|
56620
|
+
var config=this.InsideLabelConfig;
|
|
56621
|
+
if (config.Position!=0 && config.Position!=1) return;
|
|
56622
|
+
var margin=config.Margin;
|
|
56529
56623
|
|
|
56530
56624
|
this.Canvas.fillStyle=this.LineColor;
|
|
56531
|
-
this.Canvas.font=
|
|
56625
|
+
this.Canvas.font=config.Font;
|
|
56626
|
+
var textHeight=this.Canvas.measureText("擎").width;
|
|
56627
|
+
var border=this.Frame.GetBorder();
|
|
56532
56628
|
|
|
56533
56629
|
if (isHScreen)
|
|
56534
56630
|
{
|
|
56535
|
-
left=this.Frame.ChartBorder.GetTop();
|
|
56536
|
-
this.Canvas.textAlign="left";
|
|
56537
|
-
this.Canvas.textBaseline="bottom";
|
|
56538
|
-
var xText=point.X;
|
|
56539
|
-
var yText=left;
|
|
56540
|
-
this.Canvas.translate(xText, yText);
|
|
56541
|
-
this.Canvas.rotate(90 * Math.PI / 180); //数据和框子旋转180度
|
|
56542
56631
|
var yValue=this.Frame.GetYData(point.X);
|
|
56543
56632
|
var text=yValue.toFixed(2);
|
|
56544
|
-
if (this.
|
|
56633
|
+
if (this.LabelTitle) text=this.LabelTitle+text;
|
|
56634
|
+
var textWidth=this.Canvas.measureText(text).width;
|
|
56635
|
+
|
|
56636
|
+
var rtBG=null;
|
|
56637
|
+
if (config.Position==0) //左
|
|
56638
|
+
{
|
|
56639
|
+
var rtBG={ Top:border.Top+1, Width:textHeight+margin.Top+margin.Bottom, Height:textWidth+margin.Left+margin.Right, Left:point.X };
|
|
56640
|
+
rtBG.Bottom=rtBG.Top+rtBG.Height;
|
|
56641
|
+
rtBG.Right=rtBG.Left+rtBG.Width;
|
|
56642
|
+
}
|
|
56643
|
+
else if (config.Position==1) //右
|
|
56545
56644
|
{
|
|
56546
|
-
|
|
56547
|
-
|
|
56645
|
+
var rtBG={ Bottom:border.Bottom-1, Width:textHeight+margin.Top+margin.Bottom, Height:textWidth+margin.Left+margin.Right, Left:point.X };
|
|
56646
|
+
rtBG.Top=rtBG.Bottom-rtBG.Height;
|
|
56647
|
+
rtBG.Right=rtBG.Left+rtBG.Width;
|
|
56548
56648
|
}
|
|
56549
|
-
|
|
56649
|
+
|
|
56650
|
+
var bgColor=this.LineColor;
|
|
56651
|
+
if (config.BGAlpha<1) bgColor=IChartDrawPicture.ColorToRGBA(this.LineColor, config.BGAlpha);
|
|
56652
|
+
this.Canvas.fillStyle=bgColor;
|
|
56653
|
+
this.Canvas.fillRect(rtBG.Left, rtBG.Top, rtBG.Width, rtBG.Height);
|
|
56654
|
+
|
|
56655
|
+
var xText=rtBG.Right-margin.Top;
|
|
56656
|
+
var yText=rtBG.Top+margin.Left;
|
|
56657
|
+
this.Canvas.translate(xText, yText);
|
|
56658
|
+
this.Canvas.rotate(90 * Math.PI / 180); //数据和框子旋转180度
|
|
56659
|
+
|
|
56660
|
+
this.Canvas.textAlign="left";
|
|
56661
|
+
this.Canvas.textBaseline="top";
|
|
56662
|
+
this.Canvas.fillStyle=config.TextColor;
|
|
56663
|
+
this.Canvas.fillText(text,0,0);
|
|
56550
56664
|
}
|
|
56551
56665
|
else
|
|
56552
56666
|
{
|
|
56553
|
-
this.Canvas.textAlign="left";
|
|
56554
|
-
this.Canvas.textBaseline="bottom";
|
|
56555
56667
|
var yValue=this.Frame.GetYData(point.Y);
|
|
56556
56668
|
var text=yValue.toFixed(2);
|
|
56557
|
-
if (this.
|
|
56669
|
+
if (this.LabelTitle) text=this.LabelTitle+text;
|
|
56670
|
+
var textWidth=this.Canvas.measureText(text).width;
|
|
56671
|
+
|
|
56672
|
+
var rtBG=null;
|
|
56673
|
+
if (config.Position==0) //左
|
|
56674
|
+
{
|
|
56675
|
+
var rtBG={ Left:border.Left+1, Height:textHeight+margin.Top+margin.Bottom, Width:textWidth+margin.Left+margin.Right, Bottom:point.Y };
|
|
56676
|
+
rtBG.Top=rtBG.Bottom-rtBG.Height;
|
|
56677
|
+
rtBG.Right=rtBG.Left+rtBG.Width;
|
|
56678
|
+
}
|
|
56679
|
+
else if (config.Position==1) //右
|
|
56680
|
+
{
|
|
56681
|
+
var rtBG={ Right:border.Right-1, Height:textHeight+margin.Top+margin.Bottom, Width:textWidth+margin.Left+margin.Right, Bottom:point.Y };
|
|
56682
|
+
rtBG.Top=rtBG.Bottom-rtBG.Height;
|
|
56683
|
+
rtBG.Left=rtBG.Right-rtBG.Width;
|
|
56684
|
+
}
|
|
56685
|
+
|
|
56686
|
+
var bgColor=this.LineColor;
|
|
56687
|
+
if (config.BGAlpha<1) bgColor=IChartDrawPicture.ColorToRGBA(this.LineColor, config.BGAlpha);
|
|
56688
|
+
this.Canvas.fillStyle=bgColor;
|
|
56689
|
+
this.Canvas.fillRect(rtBG.Left, rtBG.Top, rtBG.Width, rtBG.Height);
|
|
56690
|
+
|
|
56691
|
+
var xText=rtBG.Left+margin.Left;
|
|
56692
|
+
var yText=rtBG.Top+margin.Top;
|
|
56693
|
+
this.Canvas.textAlign="left";
|
|
56694
|
+
this.Canvas.textBaseline = "top";
|
|
56695
|
+
this.Canvas.fillStyle=config.TextColor;
|
|
56696
|
+
this.Canvas.fillText(text,xText,yText);
|
|
56697
|
+
}
|
|
56698
|
+
}
|
|
56699
|
+
}
|
|
56700
|
+
|
|
56701
|
+
// 画图工具-水平射线线 支持横屏
|
|
56702
|
+
function ChartDrawPictureHorizontalRay()
|
|
56703
|
+
{
|
|
56704
|
+
this.newMethod=IChartDrawPicture; //派生
|
|
56705
|
+
this.newMethod();
|
|
56706
|
+
delete this.newMethod;
|
|
56707
|
+
|
|
56708
|
+
this.ClassName='ChartDrawPictureHorizontalRay';
|
|
56709
|
+
this.PointCount=1;
|
|
56710
|
+
this.IsPointIn=this.IsPointIn_XYValue_Line;
|
|
56711
|
+
this.IsDrawFirst=true;
|
|
56712
|
+
this.LineWidth=1;
|
|
56713
|
+
this.Super_SetOption=this.SetOption; //父类函数
|
|
56714
|
+
this.Super_ExportStorageData=this.ExportStorageData;
|
|
56715
|
+
|
|
56716
|
+
this.LabelConfig=
|
|
56717
|
+
{
|
|
56718
|
+
Right:{ IsShow:true, Margin:{ Left:5, Top:4, Bottom:2, Right:5 } },
|
|
56719
|
+
Font:`${12*GetDevicePixelRatio()}px 微软雅黑`, TextColor:"rgb(255,255,255)"
|
|
56720
|
+
};
|
|
56721
|
+
|
|
56722
|
+
this.SetOption=function(option)
|
|
56723
|
+
{
|
|
56724
|
+
if (this.Super_SetOption) this.Super_SetOption(option);
|
|
56725
|
+
if (option)
|
|
56726
|
+
{
|
|
56727
|
+
if (option.LabelTitle) this.LabelTitle=option.LabelTitle;
|
|
56728
|
+
|
|
56729
|
+
if (option.Label)
|
|
56558
56730
|
{
|
|
56559
|
-
|
|
56560
|
-
|
|
56731
|
+
var item=option.Label;
|
|
56732
|
+
if (item.Right)
|
|
56733
|
+
{
|
|
56734
|
+
var subItem=item.Right;
|
|
56735
|
+
if (IFrameSplitOperator.IsBool(subItem.IsShow)) this.LabelConfig.Right.IsShow=subItem.IsShow;
|
|
56736
|
+
}
|
|
56737
|
+
|
|
56738
|
+
if (item.Font) this.LabelConfig.Font=item.Font;
|
|
56739
|
+
if (item.TextColor) this.LabelConfig.FoTextColornt=item.TextColor;
|
|
56561
56740
|
}
|
|
56562
|
-
|
|
56741
|
+
}
|
|
56742
|
+
}
|
|
56743
|
+
|
|
56744
|
+
this.ExportStorageData=function()
|
|
56745
|
+
{
|
|
56746
|
+
var storageData;
|
|
56747
|
+
if (this.Super_ExportStorageData)
|
|
56748
|
+
{
|
|
56749
|
+
storageData=this.Super_ExportStorageData();
|
|
56750
|
+
}
|
|
56751
|
+
return storageData;
|
|
56752
|
+
}
|
|
56753
|
+
|
|
56754
|
+
this.GetXYCoordinate=function()
|
|
56755
|
+
{
|
|
56756
|
+
if (this.IsFrameMinSize()) return null;
|
|
56757
|
+
var drawPoint=this.CalculateDrawPoint();
|
|
56758
|
+
|
|
56759
|
+
var data=this.PointRange(drawPoint);
|
|
56760
|
+
if (data) data.IsShowYCoordinate=false;
|
|
56761
|
+
return data;
|
|
56762
|
+
}
|
|
56763
|
+
|
|
56764
|
+
this.Draw=function()
|
|
56765
|
+
{
|
|
56766
|
+
this.LinePoint=[];
|
|
56767
|
+
if (this.IsFrameMinSize()) return;
|
|
56768
|
+
if (!this.IsShow) return;
|
|
56769
|
+
|
|
56770
|
+
var drawPoint=this.CalculateDrawPoint();
|
|
56771
|
+
if (!drawPoint || drawPoint.length!=1) return;
|
|
56772
|
+
if (!this.Frame) return;
|
|
56773
|
+
if (this.Value.length!=1) return;
|
|
56774
|
+
if (!this.IsYValueInFrame(this.Value[0].YValue)) return null;
|
|
56775
|
+
|
|
56776
|
+
var isHScreen=this.Frame.IsHScreen;
|
|
56777
|
+
var left=this.Frame.ChartBorder.GetLeft();
|
|
56778
|
+
var right=this.Frame.ChartBorder.GetRight();
|
|
56779
|
+
if (isHScreen)
|
|
56780
|
+
{
|
|
56781
|
+
left=this.Frame.ChartBorder.GetTop();
|
|
56782
|
+
right=this.Frame.ChartBorder.GetBottom();
|
|
56783
|
+
}
|
|
56784
|
+
this.ClipFrame();
|
|
56785
|
+
|
|
56786
|
+
this.Canvas.strokeStyle=this.LineColor;
|
|
56787
|
+
this.SetLineWidth();
|
|
56788
|
+
this.Canvas.beginPath();
|
|
56789
|
+
if (isHScreen)
|
|
56790
|
+
{
|
|
56791
|
+
this.Canvas.moveTo(drawPoint[0].X,drawPoint[0].Y);
|
|
56792
|
+
this.Canvas.lineTo(drawPoint[0].X,right);
|
|
56793
|
+
}
|
|
56794
|
+
else
|
|
56795
|
+
{
|
|
56796
|
+
var yFixed=ToFixedPoint2(this.LineWidth,drawPoint[0].Y);
|
|
56797
|
+
this.Canvas.moveTo(drawPoint[0].X,yFixed);
|
|
56798
|
+
this.Canvas.lineTo(right,yFixed);
|
|
56799
|
+
}
|
|
56800
|
+
this.Canvas.stroke();
|
|
56801
|
+
this.RestoreLineWidth();
|
|
56802
|
+
|
|
56803
|
+
var line={Start:new Point(), End:new Point()};
|
|
56804
|
+
if (isHScreen)
|
|
56805
|
+
{
|
|
56806
|
+
line.Start.X=drawPoint[0].X;
|
|
56807
|
+
line.Start.Y=drawPoint[0].Y;
|
|
56808
|
+
line.End.X=drawPoint[0].X;
|
|
56809
|
+
line.End.Y=right;
|
|
56810
|
+
}
|
|
56811
|
+
else
|
|
56812
|
+
{
|
|
56813
|
+
line.Start.X=drawPoint[0].X;
|
|
56814
|
+
line.Start.Y=drawPoint[0].Y;
|
|
56815
|
+
line.End.X=right;
|
|
56816
|
+
line.End.Y=drawPoint[0].Y;
|
|
56817
|
+
}
|
|
56818
|
+
this.LinePoint.push(line);
|
|
56819
|
+
|
|
56820
|
+
//画点
|
|
56821
|
+
this.DrawPoint(drawPoint);
|
|
56822
|
+
|
|
56823
|
+
this.Canvas.restore();
|
|
56824
|
+
|
|
56825
|
+
this.DrawValueLabel(drawPoint[0]);
|
|
56826
|
+
}
|
|
56827
|
+
|
|
56828
|
+
this.DrawValueLabel=function(point)
|
|
56829
|
+
{
|
|
56830
|
+
if (!point) return;
|
|
56831
|
+
if (this.Frame.IsHScreen) return; //不支持横屏
|
|
56832
|
+
|
|
56833
|
+
var y=point.Y;
|
|
56834
|
+
var yValue=this.Frame.GetYData(y);
|
|
56835
|
+
var text=yValue.toFixed(2);
|
|
56836
|
+
|
|
56837
|
+
var border=this.Frame.GetBorder();
|
|
56838
|
+
var config=this.LabelConfig;
|
|
56839
|
+
|
|
56840
|
+
this.Canvas.font=config.Font;
|
|
56841
|
+
var textHeight=this.Canvas.measureText("擎").width;
|
|
56842
|
+
var textWidth=this.Canvas.measureText(text).width;
|
|
56843
|
+
|
|
56844
|
+
if (config.Right.IsShow && this.Frame.ChartBorder.Right>5)
|
|
56845
|
+
{
|
|
56846
|
+
var margin=config.Right.Margin;
|
|
56847
|
+
var rtBG={ Left:border.Right+1, Height:textHeight+margin.Top+margin.Bottom, Width:textWidth+margin.Left+margin.Right };
|
|
56848
|
+
rtBG.Top=y-textHeight/2-margin.Top;
|
|
56849
|
+
rtBG.Bottom=rtBG.Top+rtBG.Height;
|
|
56850
|
+
rtBG.Right=rtBG.Left+rtBG.Width;
|
|
56851
|
+
this.Canvas.fillStyle=this.LineColor;
|
|
56852
|
+
this.Canvas.fillRect(rtBG.Left, rtBG.Top, rtBG.Width, rtBG.Height);
|
|
56853
|
+
|
|
56854
|
+
this.Canvas.textAlign="left";
|
|
56855
|
+
this.Canvas.textBaseline = "top";
|
|
56856
|
+
var xText=rtBG.Left+margin.Left;
|
|
56857
|
+
var yText=rtBG.Top+margin.Top;
|
|
56858
|
+
this.Canvas.fillStyle=config.TextColor;
|
|
56859
|
+
this.Canvas.fillText(text,xText,yText);
|
|
56563
56860
|
}
|
|
56564
56861
|
}
|
|
56565
56862
|
}
|
|
56566
56863
|
|
|
56864
|
+
|
|
56567
56865
|
//水平线2
|
|
56568
56866
|
function ChartDrawHLine()
|
|
56569
56867
|
{
|
|
@@ -54,6 +54,12 @@
|
|
|
54
54
|
<div class="content unicode" style="display: block;">
|
|
55
55
|
<ul class="icon_lists dib-box">
|
|
56
56
|
|
|
57
|
+
<li class="dib">
|
|
58
|
+
<span class="icon hqchart_drawtool"></span>
|
|
59
|
+
<div class="name">图标_水平射线</div>
|
|
60
|
+
<div class="code-name">&#xe79b;</div>
|
|
61
|
+
</li>
|
|
62
|
+
|
|
57
63
|
<li class="dib">
|
|
58
64
|
<span class="icon hqchart_drawtool"></span>
|
|
59
65
|
<div class="name">趋势线角度</div>
|
|
@@ -444,9 +450,9 @@
|
|
|
444
450
|
<pre><code class="language-css"
|
|
445
451
|
>@font-face {
|
|
446
452
|
font-family: 'hqchart_drawtool';
|
|
447
|
-
src: url('iconfont.woff2?t=
|
|
448
|
-
url('iconfont.woff?t=
|
|
449
|
-
url('iconfont.ttf?t=
|
|
453
|
+
src: url('iconfont.woff2?t=1717469992388') format('woff2'),
|
|
454
|
+
url('iconfont.woff?t=1717469992388') format('woff'),
|
|
455
|
+
url('iconfont.ttf?t=1717469992388') format('truetype');
|
|
450
456
|
}
|
|
451
457
|
</code></pre>
|
|
452
458
|
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
|
|
@@ -472,6 +478,15 @@
|
|
|
472
478
|
<div class="content font-class">
|
|
473
479
|
<ul class="icon_lists dib-box">
|
|
474
480
|
|
|
481
|
+
<li class="dib">
|
|
482
|
+
<span class="icon hqchart_drawtool icon-tubiao_shuipingshexian"></span>
|
|
483
|
+
<div class="name">
|
|
484
|
+
图标_水平射线
|
|
485
|
+
</div>
|
|
486
|
+
<div class="code-name">.icon-tubiao_shuipingshexian
|
|
487
|
+
</div>
|
|
488
|
+
</li>
|
|
489
|
+
|
|
475
490
|
<li class="dib">
|
|
476
491
|
<span class="icon hqchart_drawtool icon-qushixianjiaodu"></span>
|
|
477
492
|
<div class="name">
|
|
@@ -1057,6 +1072,14 @@
|
|
|
1057
1072
|
<div class="content symbol">
|
|
1058
1073
|
<ul class="icon_lists dib-box">
|
|
1059
1074
|
|
|
1075
|
+
<li class="dib">
|
|
1076
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
1077
|
+
<use xlink:href="#icon-tubiao_shuipingshexian"></use>
|
|
1078
|
+
</svg>
|
|
1079
|
+
<div class="name">图标_水平射线</div>
|
|
1080
|
+
<div class="code-name">#icon-tubiao_shuipingshexian</div>
|
|
1081
|
+
</li>
|
|
1082
|
+
|
|
1060
1083
|
<li class="dib">
|
|
1061
1084
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
1062
1085
|
<use xlink:href="#icon-qushixianjiaodu"></use>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
@font-face {
|
|
2
2
|
font-family: "hqchart_drawtool"; /* Project id 4529603 */
|
|
3
|
-
src: url('iconfont.woff2?t=
|
|
4
|
-
url('iconfont.woff?t=
|
|
5
|
-
url('iconfont.ttf?t=
|
|
3
|
+
src: url('iconfont.woff2?t=1717469992388') format('woff2'),
|
|
4
|
+
url('iconfont.woff?t=1717469992388') format('woff'),
|
|
5
|
+
url('iconfont.ttf?t=1717469992388') format('truetype');
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
.hqchart_drawtool {
|
|
@@ -13,6 +13,10 @@
|
|
|
13
13
|
-moz-osx-font-smoothing: grayscale;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
.icon-tubiao_shuipingshexian:before {
|
|
17
|
+
content: "\e79b";
|
|
18
|
+
}
|
|
19
|
+
|
|
16
20
|
.icon-qushixianjiaodu:before {
|
|
17
21
|
content: "\e60c";
|
|
18
22
|
}
|