临沂恒商做网站,网站建设houxiaoer,识图找图,昆明软件公司有哪些本文经原作者授权以原创方式二次分享#xff0c;欢迎转载、分享。原文作者#xff1a;普通的地球人原文地址#xff1a;https://www.cnblogs.com/tsliwei/p/7155616.htmlGithub地址#xff1a;https://github.com/WPFDevelopersOrg/WPFDevelopers.Charts大体思路图表使用Ar… 本文经原作者授权以原创方式二次分享欢迎转载、分享。原文作者普通的地球人原文地址https://www.cnblogs.com/tsliwei/p/7155616.htmlGithub地址https://github.com/WPFDevelopersOrg/WPFDevelopers.Charts大体思路图表使用ArcPopup实现图表分为两部分,一是环形部分,一是标注的明细部分环形部分使用Arc图形表示.需要注意这个Arc是Blend里的图形.用Blend建项- 目的话可以直接用,使用VS建项目需要添加引用 Microsoft.Expression.Drawing 在引用管理器程序集扩展 下(前提是已经安装了Blend)明细部分使用Popup控件,IsOpen属性绑定到Arc的IsMouseOver,也就是鼠标进入圆弧的时候,Popup就打开显示Popup内部一个椭圆控件当作背景,一个文字显示,一个折线虚线化当作指针然后就是把Popup定位到对应圆弧合适的位置去显示(这里取的是圆弧的中间)比较抱歉的是样式比较丑陋,忽略吧,重点看定位圆弧部分Arc有两个重要的属性:StartAngle起始角度和EndAngle终结角度.这两个属性决定了圆弧占所在圆环的比例每一个数据项就对应一个圆弧,把所有圆弧都放到一个容器里,首尾相连数据项的总和为100,那么所有圆弧也就组成一个完整的圆环Popup明细部分明细部分分为四种,见图椭圆从图可知,作为背景的椭圆分为两种情况,小于180度,椭圆靠容器的右边对齐,大于180度,靠容器的左边对齐也就是代码的这部分Ellipse ell new Ellipse() { Fill brush }
//中间点角度小于180 明细靠右显示 否则靠左显示
Grid detailGrid new Grid() { Width _popupHeight, HorizontalAlignment HorizontalAlignment.Right }
if (middleAngle 180)
{detailGrid.HorizontalAlignment HorizontalAlignment.Left
}折线折线是分为四种,每一个角度区间都对应一种private Polyline GetPopupPolyline(double middleAngle)
{Polyline pLine new Polyline() { Stroke new SolidColorBrush(Color.FromRgb(0, 0, 0)), StrokeDashArray new DoubleCollection(new double[] { 5, 2 }) }double x1 0, y1 0double x2 0, y2 0double x3 0, y3 0if (middleAngle 0 middleAngle 90){x1 0y1 _popupHeightx2 _popupWidth / 2y2 _popupHeightx3 _popupWidth * 3 / 4y3 _popupHeight / 2}if (middleAngle 90 middleAngle 180){x1 0y1 0x2 _popupWidth / 2y2 0x3 _popupWidth * 3 / 4y3 _popupHeight / 2}if (middleAngle 180 middleAngle 270){x1 _popupWidthy1 0x2 _popupWidth / 2y2 0x3 _popupWidth / 4y3 _popupHeight / 2}if (middleAngle 270 middleAngle 360){x1 _popupWidthy1 _popupHeightx2 _popupWidth / 2y2 _popupHeightx3 _popupWidth / 4y3 _popupHeight / 2}pLine.Points.Add(new Point(x1, y1))pLine.Points.Add(new Point(x2, y2))pLine.Points.Add(new Point(x3, y3))return pLine
}Popup的定位首先以0-90度为例,说明一些基本的东西,见图首先Popup默认的位置,都是在它容器的左下方的,Popup的左上角和容器的左下角重合现在要做的是Popup标记为红点的位置,和圆环上标记为红点的位置重合先来回顾一下小时候学过的公式1.直角三角形 ar*sinA2.勾股定理 c^2a^2b^2 bSqrt(c^2-a^2)上图的直角三角形,角A的对边为a,临边为b,斜边为c.显然c边于圆的半径r相等注意:因为圆弧是有厚度的,所以取r的时候要减去二分之一的圆弧厚度角A是可以通过90度减去圆弧的对应的角度求出来的,也就是sinA的值已知了,那么就可以求出a和b的长度,然后就可以去移动Popup了1)0-90度X轴 1、向右移动二分之一个容器的width 2、向右移动一个b的距离Y轴 1、向上移动二分之一个容器的height2、向上移动一个Popup的height3、向上移动一个a的距离290-180度X轴 1、向右移动二分之一个容器的width2、向右移动一个a的距离Y轴 1、上移二分之一个圆弧的Thickness,以保证标记的起点在圆弧的中央2、上移一个(r-b)的距离3180-270度X轴 1、向左移动一个b的距离Y轴 1、上移二分之一个圆弧的Thickness,以保证标记的起点在圆弧的中央2、上移一个(r-a)的距离4270-360度X轴 1、向左移动一个a的距离Y轴 1、向上移动二分之一个容器的height2、向上移动一个Popup的height3、向上移动一个b的距离代码如下private Popup GetPopup(double middleAngle)
{/** 生成popup* 设置popup的offset 让标记线的起点 对应到圆弧的中间点*/Popup popup new Popup() { Width _popupWidth, Height _popupHeight, AllowsTransparency true, IsHitTestVisible false };//直角三角形 ar*sinA 勾股定理 c^2a^2b^2 bSqrt(c^2-a^2)double r _chartSize / 2 - _arcThickness / 2;double offsetX 0, offsetY 0;if (middleAngle 0 middleAngle 90){double sinA Math.Sin(Math.PI * (90 - middleAngle) / 180);double a r * sinA;double c r;double b Math.Sqrt(c * c - a * a);offsetX _chartSize / 2 b;offsetY -(_chartSize / 2 _popupHeight a);}if (middleAngle 90 middleAngle 180){double sinA Math.Sin(Math.PI * (180 - middleAngle) / 180);double a r * sinA;double c r;double b Math.Sqrt(c * c - a * a);offsetX _chartSize / 2 a;offsetY -(_arcThickness / 2 (r - b));}if (middleAngle 180 middleAngle 270){double sinA Math.Sin(Math.PI * (270 - middleAngle) / 180);double a r * sinA;double c r;double b Math.Sqrt(c * c - a * a);offsetX -_popupWidth (r - b) _arcThickness / 2;offsetY -(_arcThickness / 2 (r - a));}if (middleAngle 270 middleAngle 360){double sinA Math.Sin(Math.PI * (360 - middleAngle) / 180);double a r * sinA;double c r;double b Math.Sqrt(c * c - a * a);offsetX -_popupWidth (r - a) _arcThickness / 2;offsetY -(_chartSize / 2 _popupHeight b);}popup.HorizontalOffset offsetX;popup.VerticalOffset offsetY;return popup;
}差不多主要的就是这些了到这画图有点累源码1[1]Gtihub[2]Gitee[3]参考资料[1]源码: https://files.cnblogs.com/files/tsliwei/ArcChart.zip[2]Gtihub: https://github.com/WPFDevelopersOrg/WPFDevelopers.Charts[3]gitee: https://gitee.com/WPFDevelopersOrg/WPFDevelopers.Charts
