WinForms Doughnut Chart Control

在超过十年的时间里,更新了原始项目,扩展了其功能,使其能够绘制甜甜圈图。本文的部分内容和代码来源于mattsj1984的文章“A control to display pie charts with highly customizable formatting”,该文章之前是基于Julijan Sribar的“3D Pie Chart - CodeProject”。尽管WinForms应该已经过时,但它依然活跃着!为了给这个控件一个未来,还制作了.NET 5版本。

背景:需要为一个项目制作一个甜甜圈控件,一个同事对说:“嗯,就拿一个饼图然后在上面画一个圆柱体”……几天前,一切开始了(不,这不是采取的方法)。

基本上,必须从“简单”的DrawPie指令: public void DrawPie(System.Drawing.Pen pen, float x, float y, float width, float height, float startAngle, float sweepAngle); 转向DrawArc: public void DrawArc(System.Drawing.Pen pen, System.Drawing.Rectangle rect, float startAngle, float sweepAngle); DrawPie是一个单一命令,因此切片(顶部或底部)是一次性设计的,然后必须计算边缘以连接两个切片。使用DrawArc,必须设计外椭圆(由单个弧线组成,就像饼图切片)和内椭圆,它们之间的“距离”就是甜甜圈的宽度,将它们连接在一起。

这个“距离”会根据倾斜度变化,实际上,必须注意透视(投影),在90°时是全宽:在0°时宽度为0:这是一个很好的使用Math.Sin(Double)函数的例子,它正好做到了这一点:90°时值为1,0°时为0: float bottomInternalY = ((bottomExternalY) + (donutSize / 2) * (float)Math.Sin(Control.pieStyle.Inclination)); float topInternalY = ((topExternalY) + (donutSize / 2) * (float)Math.Sin(Control.pieStyle.Inclination));

接下来是另一个棘手的部分:必须连接多个Arcs和Lines以获得GraphicPath。为了实现这一点(有一个连接的路径),必须注意绘画的角度,通常,第二个弧线必须用负角度绘制。连接Arcs也意味着必须有StartingPoints和EndPoints(参考兴趣点)。

使用代码:控件的结构很像标准的Windows Forms控件,就使用而言。PieChart本身包含一个Items属性,该属性的类型是PieChart.ItemCollection。这个集合存储了PieChartItem类型的对象。每个PieChartItem由Text、ToolTipText、Color、Offset和Weight属性组成。

要创建和使用控件,请使用Visual Studio中的Windows Forms设计器将PieChart添加到表单中,并尝试图表属性:或者可以编程方式使用控件: PieChart pieControl = new PieChart(); pieControl.DisplayDoughnut = true; pieControl.Items.Add(new PieChartItem(10, Color.Red, "Text", "ToolTipText")); pieControl.Items.Add(new PieChartItem(5, Color.Blue, "Blue", "BlueTips")); pieControl.AutoSizePie = true; pieControl.TextDisplayMode = PieChart.TextDisplayTypes.FitOnly; pieControl.DrawBorder = false; pieControl.GraphTitle = null;

添加了ItemTextTemplate属性,其中使用关键词#VALUE、#PERCENTAGE和#ITEMTEXT,可以通过布尔值UseItemTextTemplate触发相关信息的显示。(百分比的小数位通过PecentageDecimals属性管理。) pieControl.ItemTextTemplate = "Val: #VALUE - Perc: #PERCENTAGE - Text: #ITEMTEXT"; pieControl.UseItemTextTemplate = true; pieControl.PecentageDecimals = 2;

经典功能(+增强)仍然存在:兴趣点。因为是通过GDI+绘制弧线的,所以需要找到这些弧线的“终点”和“起点”,以便创建路径进行填充或绘制(边缘)。在搜索之后,找到了一个帖子(Getting End Point in ArcSegment with Start X/Y and Start+Sweep Angles),BlueRaja - Danny Pflughoeft给出了答案(对于终点)。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485