WPF实现的简单饼图
简介
前段时间帮一个同事的忙，利用WPF实现的一个简单饼图，仅能看饼图的比例，无文字查看功能。效果图如下：
用法：
var sectorParts = new List<SectorPart>(); sectorParts.Add(new SectorPart(90, Brushes.Red)); sectorParts.Add(new SectorPart(30, Brushes.Green)); sectorParts.Add(new SectorPart(120, Brushes.GreenYellow)); sectorParts.Add(new SectorPart(70, Brushes.HotPink)); sectorParts.Add(new SectorPart(50, Brushes.Yellow)); var ringParts = new List<RingPart>(); ringParts.Add(new RingPart(40, 20, 40, 20, Brushes.White)); var shapes = PieChartDrawer.GetEllipsePieChartShapes(midPoint, 180, 90, 30, sectorParts, ringParts); foreach (var shape in shapes) { GrdPie.Children.Add(shape); }
设置好饼图相关的信息，获取其各个组成部分，再将其添加到容器中。
原理
可以看出简介中的图由一系列中扇形和环组成，计算出扇形和环的形状就可以完成饼图的绘制了。
扇形
一个扇形由两边和一条弧组成，扇形的关键就在已知圆周的圆形和半径，以及扇形的边绕Y轴正向旋转的角度，如何求出扇形在圆周上的点。
在才开始我走了不少弯路，利用矩阵做了许多运算，结果都不对。后面灵机一动，发现不用那么麻烦。直接把圆平移至原点，计算出相应扇形在圆周上的点，再将其平移回来即可。代码如下：
/// <summary> /// 获取圆周上指定角度的点坐标 /// </summary> /// <param name="center">圆心</param> /// <param name="radius">半径</param> /// <param name="angle">角度,从0到360度，以正北方向为0度，顺时针旋转角度增加</param> /// <returns>在圆周上旋转角度后的坐标</returns> public static Point GetCirclePoint(this Point center, double radius, double angle) { // 圆心平移到原点后0度所对应的向量 var zeroAngleVector = new Vector(0, radius); // 旋转角度所对应的矩阵 var rotateMatrix = new Matrix(); rotateMatrix.Rotate(180 + angle); // 因旋转的中心点在原点,最后需要平移到实际坐标上 return (zeroAngleVector * rotateMatrix) + center; }
有了圆的计算方法，椭圆的也就水到渠成了，因为椭圆相当于圆的拉伸或者收缩。
/// <summary> /// 获取椭圆上指定角度的点坐标 /// </summary> /// <param name="center">椭圆两焦点的中点</param> /// <param name="radiusX">长轴</param> /// <param name="radiusY">短轴</param> /// <param name="angle">角度,从0到360度，以正北方向为0度，顺时针旋转角度增加</param> /// <returns>在椭圆上旋转角度后的坐标</returns> public static Point GetEllipsePoint(this Point center, double radiusX, double radiusY, double angle) { // 半径为X半轴的圆圆心平移到原点后0度所对应的向量 var circleZeroAnglePoint = new Vector(0, radiusX); // 旋转角度所对应的矩阵 var rotateMatrix = new Matrix(); rotateMatrix.Rotate(180 + angle); // 圆旋转角度后的坐标 var circlePoint = circleZeroAnglePoint * rotateMatrix; // 将圆拉伸椭圆后的坐标 var ellpseOrigin = new Point(circlePoint.X, circlePoint.Y * radiusY / radiusX); // 将坐标平移至实际坐标 return (Vector)ellpseOrigin + center; }
环
环可由两个椭圆计算出来。较简单，就不多说了。
代码
扇形的定义
namespace PieChartTest { using System.Windows.Media; /// <summary> /// 扇形 /// </summary> public class SectorPart { /// <summary> /// 构造函数 /// </summary> /// <param name="spanAngle">跨越角度</param> /// <param name="fillBrush">填充画刷</param> public SectorPart(double spanAngle, Brush fillBrush) { this.SpanAngle = spanAngle; this.FillBrush = fillBrush; } /// <summary> /// 跨越角度,单位为角度,取值范围为0到360 /// </summary> public double SpanAngle { get; set; } /// <summary> /// 填充画刷 /// </summary> public Brush FillBrush { get; set; } } }
环的定义
namespace PieChartTest { using System.Windows.Media; /// <summary> /// 环 /// </summary> public class RingPart { /// <summary> /// 构造函数，构造里外均为圆的圆环 /// </summary> /// <param name="radius">里圆半径</param> /// <param name="spanRadius">里外圆半径差</param> /// <param name="fillBrush">填充画刷</param> public RingPart(double radius, double spanRadius, Brush fillBrush) { this.RadiusX = radius; this.RadiusY = radius; this.SpanRadiusX = spanRadius; this.SpanRadiusY = spanRadius; this.FillBrush = fillBrush; } /// <summary> /// 构造函数 /// </summary> /// <param name="radiusX">里边椭圆的长轴</param> /// <param name="radiusY">里边椭圆的短轴</param> /// <param name="spanRadiusX">里外椭圆的长轴差</param> /// <param name="spanRadiusY">里外椭圆的短轴差</param> /// <param name="fillBrush">填充画刷</param> public RingPart(double radiusX, double radiusY, double spanRadiusX, double spanRadiusY, Brush fillBrush) { this.RadiusX = radiusX; this.RadiusY = radiusY; this.SpanRadiusX = spanRadiusX; this.SpanRadiusY = spanRadiusY; this.FillBrush = fillBrush; } /// <summary> /// 长轴 /// </summary> public double RadiusX { get; set; } /// <summary> /// 短轴 /// </summary> public double RadiusY { get; set; } /// <summary> /// 长轴跨越的距离 /// </summary> public double SpanRadiusX { get; set; } /// <summary> /// 短轴跨越的距离 /// </summary> public double SpanRadiusY { get; set; } /// <summary> /// 填充画刷 /// </summary> public Brush FillBrush { get; set; } } }
饼图的绘制类
namespace PieChartTest { using System.Collections.Generic; using System.Windows; using System.Windows.Media; using System.Windows.Shapes; /// <summary> /// 饼图的绘制类 /// </summary> public static class PieChartDrawer { /// <summary> /// 获取饼图的形状列表 /// </summary> /// <param name="center">圆心</param> /// <param name="radius">圆的半径</param> /// <param name="offsetAngle">偏移角度,即第一个扇形开始的角度</param> /// <param name="sectorParts">扇形列表,扇形列表的SpanAngle之和应为360度</param> /// <param name="ringParts">环列表</param> /// <returns>构成饼图的形状列表</returns> public static IEnumerable<Shape> GetPieChartShapes(Point center, double radius, double offsetAngle, IEnumerable<SectorPart> sectorParts, IEnumerable<RingPart> ringParts) { return GetEllipsePieChartShapes(center, radius, radius, offsetAngle, sectorParts, ringParts); } /// <summary> /// 获取椭圆形状的饼图的形状列表 /// </summary> /// <param name="center">椭圆两个焦点的中点</param> /// <param name="radiusX">椭圆的长轴</param> /// <param name="radiusY">椭圆的短轴</param> /// <param name="offsetAngle">偏移角度,即第一个扇形开始的角度</param> /// <param name="sectorParts">扇形列表,扇形列表的SpanAngle之和应为360度</param> /// <param name="ringParts">环列表</param> /// <returns>构成饼图的形状列表</returns> public static IEnumerable<Shape> GetEllipsePieChartShapes(Point center, double radiusX, double radiusY, double offsetAngle, IEnumerable<SectorPart> sectorParts, IEnumerable<RingPart> ringParts) { var shapes = new List<Shape>(); double startAngle = offsetAngle; foreach (var sectorPart in sectorParts) { // 扇形顺时针方向在椭圆上的第一个点 var firstPoint = center.GetEllipsePoint(radiusX, radiusY, startAngle); startAngle += sectorPart.SpanAngle; // 扇形顺时针方向在椭圆上的第二个点 var secondPoint = center.GetEllipsePoint(radiusX, radiusY, startAngle); var sectorFigure = new PathFigure { StartPoint = center }; // 添加中点到第一个点的弦 sectorFigure.Segments.Add(new LineSegment(firstPoint, false)); // 添加第一个点和第二个点之间的弧 sectorFigure.Segments.Add( new ArcSegment(secondPoint, new Size(radiusX, radiusY), 0, false, SweepDirection.Clockwise, false)); var sectorGeometry = new PathGeometry(); sectorGeometry.Figures.Add(sectorFigure); var sectorPath = new Path { Data = sectorGeometry, Fill = sectorPart.FillBrush }; shapes.Add(sectorPath); } var ringShapes = GetRingShapes(center, ringParts); shapes.AddRange(ringShapes); return shapes; } /// <summary> /// 获取环的形状列表 /// </summary> /// <param name="center">中心点，为圆表示圆形，为椭圆表示椭圆两个焦点的中点</param> /// <param name="ringParts">环列表</param> /// <returns>环的形状列表</returns> private static IEnumerable<Shape> GetRingShapes(Point center, IEnumerable<RingPart> ringParts) { var shapes = new List<Shape>(); foreach (var ringPart in ringParts) { var innerEllipse = new EllipseGeometry(center, ringPart.RadiusX, ringPart.RadiusY); var outterEllipse = new EllipseGeometry(center, ringPart.RadiusX + ringPart.SpanRadiusX, ringPart.RadiusY + ringPart.SpanRadiusY); // 根据里外椭圆求出圆环的形状 var ringGeometry = new CombinedGeometry(GeometryCombineMode.Xor, innerEllipse, outterEllipse); var ringPath = new Path { Data = ringGeometry, Fill = ringPart.FillBrush }; shapes.Add(ringPath); } return shapes; } } }
