项目中要用到饼图,之前用Winform中的Chart控件,用一个WindowFormHost装载进来,凑合能用。
最近重新整理代码,看到程序目录下,引用的DLL不少,想用WPF自身的控件,可没找到(笨啊)
于是生出一想法:自己动手画一个吧。
给出xaml代码先:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <Ellipse Fill="#97decd" 2 HorizontalAlignment="Left" Height="200" Margin="10,0,0,0" VerticalAlignment="Top" Width="200" Stroke="#aaa" StrokeThickness="1"/> 3 <Ellipse Fill="#054252" 4 HorizontalAlignment="Left" Height="200" Margin="10,0,0,0" VerticalAlignment="Top" Width="200" Stroke="#aaa" StrokeThickness="1"> 5 <Ellipse.Clip> 6 <PathGeometry> 7 <PathFigure StartPoint="100,100" x:Name="Ell1"/> 8 </PathGeometry> 9 </Ellipse.Clip> 10 </Ellipse>
之所以给出两个Ellipse,是用上面那个作背景,下面的才是显示百分比的图。
再来画图代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 class DrawPartOfEllipseService 2 { 3 private const int ELLIPSERADIUS = 100; 4 /// <summary> 5 /// 画扇形 6 /// </summary> 7 /// <param name="per">百分比</param> 8 /// <param name="ell">椭圆的PathFigure</param> 9 /// <param name="Radius">椭圆半径</param> 10 public static void Draw(double per, PathFigure ell,int Radius) 11 { 12 if (per > 100) 13 { 14 return; 15 } 16 ell.Segments.Clear(); 17 double AAA = per * 3.6 / 180 * Math.PI; 18 Point st = new Point(Radius, Radius); 19 Point st2 = new Point(Radius * 2, Radius);/*这两个点确定一个x轴正向*/ 20 ell.Segments.Add(new LineSegment { Point = st }); 21 ell.Segments.Add(new LineSegment { Point = st2 }); 22 if (per <= 12.5) 23 { 24 Point p1 = new Point(); 25 p1.X = Radius*2; 26 p1.Y = Radius - Radius * Math.Tan(AAA); 27 ell.Segments.Add(new LineSegment { Point = p1 }); 28 } 29 else if (per <= 37.5) 30 { 31 Point p1 = new Point(Radius*2, 0); 32 ell.Segments.Add(new LineSegment { Point = p1 }); 33 Point p2 = new Point(); 34 p2.Y = 0; 35 p2.X = Radius + Radius / Math.Tan(AAA); 36 ell.Segments.Add(new LineSegment { Point = p2 }); 37 } 38 else if (per <= 62.5) 39 { 40 Point p1 = new Point(Radius*2, 0); 41 Point p2 = new Point(0, 0); 42 ell.Segments.Add(new LineSegment { Point = p1 }); 43 ell.Segments.Add(new LineSegment { Point = p2 }); 44 Point p3 = new Point(); 45 p3.X = 0; 46 p3.Y = Radius + Radius * Math.Tan(AAA); 47 ell.Segments.Add(new LineSegment { Point = p3 }); 48 } 49 else if (per <= 87.5) 50 { 51 Point p1 = new Point(Radius*2, 0); 52 Point p2 = new Point(0, 0); 53 Point p3 = new Point(0, Radius*2); 54 ell.Segments.Add(new LineSegment { Point = p1 }); 55 ell.Segments.Add(new LineSegment { Point = p2 }); 56 ell.Segments.Add(new LineSegment { Point = p3 }); 57 Point p4 = new Point(); 58 p4.Y = Radius*2; 59 p4.X = Radius - Radius / Math.Tan(AAA); 60 ell.Segments.Add(new LineSegment { Point = p4 }); 61 } 62 else 63 { 64 Point p1 = new Point(Radius*2, 0); 65 Point p2 = new Point(0, 0); 66 Point p3 = new Point(0, Radius*2); 67 ell.Segments.Add(new LineSegment { Point = p1 }); 68 ell.Segments.Add(new LineSegment { Point = p2 }); 69 ell.Segments.Add(new LineSegment { Point = p3 }); 70 Point p4 = new Point(); 71 p4.Y = Radius*2; 72 p4.X = Radius - Radius / Math.Tan(AAA); 73 ell.Segments.Add(new LineSegment { Point = p4 }); 74 } 75 } 76 77 public static void Draw(double per, PathFigure ell) 78 { 79 Draw(per, ell, ELLIPSERADIUS); 80 } 81 }
调用方法:
DrawPartOfEllipseService.Draw(80, Ell1);/*80就是百分比,Ell1是上面的xaml中的Ellipse.Clip中PathGeometry的PathFigure*/
OK,就这么多。
当然,颜色可以随意调整,至于标百分比,按自己的需求,想标哪儿标哪儿吧,还有,别忘了图例。
个人感觉,这样做速度应该比较快。